Neurolingua
commited on
Upload 18 files
Browse files- templates/ai_timetable.html +270 -0
- templates/homework.html +352 -0
- templates/index.html +273 -0
- templates/student.html +952 -0
- templates/student_aitutor.html +647 -0
- templates/student_courses.html +164 -0
- templates/student_pdfqa.html +501 -0
- templates/student_projectideas.html +285 -0
- templates/student_quiz.html +443 -0
- templates/student_reward_points.html +163 -0
- templates/student_speakai.html +354 -0
- templates/student_stepexplanation.html +280 -0
- templates/student_studyplans.html +221 -0
- templates/student_summarise_video.html +228 -0
- templates/teacher.html +1319 -0
- templates/teacher_eval.html +304 -0
- templates/teacher_paper_gen.html +200 -0
- templates/teacher_result.html +90 -0
templates/ai_timetable.html
ADDED
@@ -0,0 +1,270 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Academic Timetable Generator</title>
|
7 |
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Roboto+Mono&display=swap" rel="stylesheet">
|
8 |
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
|
9 |
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
|
10 |
+
<style>
|
11 |
+
body {
|
12 |
+
font-family: 'Roboto', sans-serif;
|
13 |
+
line-height: 1.6;
|
14 |
+
color: #333;
|
15 |
+
max-width: 800px;
|
16 |
+
margin: 0 auto;
|
17 |
+
padding: 20px;
|
18 |
+
background-color: #f0f4f8;
|
19 |
+
background-image: url('../static/time.jpg');
|
20 |
+
background-size: cover;
|
21 |
+
background-position: center;
|
22 |
+
background-repeat: no-repeat;
|
23 |
+
background-attachment: fixed;
|
24 |
+
}
|
25 |
+
body::before {
|
26 |
+
content: "";
|
27 |
+
position: fixed;
|
28 |
+
top: 0;
|
29 |
+
left: 0;
|
30 |
+
width: 100%;
|
31 |
+
height: 100%;
|
32 |
+
background-color: rgba(240, 244, 248, 0.2); /* Adjust the last value (0.8) for transparency */
|
33 |
+
z-index: -1;
|
34 |
+
}
|
35 |
+
h1 {
|
36 |
+
color: #2c3e50;
|
37 |
+
text-align: center;
|
38 |
+
margin-bottom: 30px;
|
39 |
+
}
|
40 |
+
form {
|
41 |
+
background-color: #ffffff;
|
42 |
+
padding: 30px;
|
43 |
+
border-radius: 8px;
|
44 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
45 |
+
}
|
46 |
+
label {
|
47 |
+
font-weight: bold;
|
48 |
+
color: #34495e;
|
49 |
+
}
|
50 |
+
textarea, input[type="number"] {
|
51 |
+
width: 100%;
|
52 |
+
padding: 10px;
|
53 |
+
margin-top: 5px;
|
54 |
+
margin-bottom: 20px;
|
55 |
+
border: 1px solid #bdc3c7;
|
56 |
+
border-radius: 4px;
|
57 |
+
font-size: 16px;
|
58 |
+
}
|
59 |
+
input[type="submit"] {
|
60 |
+
background-color: #3498db;
|
61 |
+
color: white;
|
62 |
+
padding: 12px 20px;
|
63 |
+
border: none;
|
64 |
+
border-radius: 4px;
|
65 |
+
cursor: pointer;
|
66 |
+
font-size: 16px;
|
67 |
+
transition: background-color 0.3s;
|
68 |
+
}
|
69 |
+
input[type="submit"]:hover {
|
70 |
+
background-color: #2980b9;
|
71 |
+
}
|
72 |
+
#loading {
|
73 |
+
display: none;
|
74 |
+
text-align: center;
|
75 |
+
margin-top: 20px;
|
76 |
+
}
|
77 |
+
.loader {
|
78 |
+
border: 5px solid #f3f3f3;
|
79 |
+
border-top: 5px solid #3498db;
|
80 |
+
border-radius: 50%;
|
81 |
+
width: 50px;
|
82 |
+
height: 50px;
|
83 |
+
animation: spin 1s linear infinite;
|
84 |
+
margin: 0 auto;
|
85 |
+
}
|
86 |
+
@keyframes spin {
|
87 |
+
0% { transform: rotate(0deg); }
|
88 |
+
100% { transform: rotate(360deg); }
|
89 |
+
}
|
90 |
+
#result {
|
91 |
+
display: none;
|
92 |
+
margin-top: 30px;
|
93 |
+
background-color: #ffffff;
|
94 |
+
padding: 30px;
|
95 |
+
border-radius: 8px;
|
96 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
97 |
+
}
|
98 |
+
#result h2 {
|
99 |
+
color: #2c3e50;
|
100 |
+
margin-top: 0;
|
101 |
+
}
|
102 |
+
pre {
|
103 |
+
background-color: #f7f9fa;
|
104 |
+
padding: 15px;
|
105 |
+
border-radius: 4px;
|
106 |
+
white-space: pre-wrap;
|
107 |
+
word-wrap: break-word;
|
108 |
+
}
|
109 |
+
.icon-container {
|
110 |
+
text-align: center;
|
111 |
+
margin-bottom: 20px;
|
112 |
+
}
|
113 |
+
.icon-container i {
|
114 |
+
font-size: 48px;
|
115 |
+
color: #3498db;
|
116 |
+
margin: 0 10px;
|
117 |
+
}
|
118 |
+
#result {
|
119 |
+
display: none;
|
120 |
+
margin-top: 30px;
|
121 |
+
background-color: #ffffff;
|
122 |
+
padding: 30px;
|
123 |
+
border-radius: 8px;
|
124 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
125 |
+
}
|
126 |
+
|
127 |
+
#result h2 {
|
128 |
+
color: #2c3e50;
|
129 |
+
margin-top: 0;
|
130 |
+
font-size: 24px;
|
131 |
+
border-bottom: 2px solid #3498db;
|
132 |
+
padding-bottom: 10px;
|
133 |
+
margin-bottom: 20px;
|
134 |
+
}
|
135 |
+
|
136 |
+
pre {
|
137 |
+
background-color: #f7f9fa;
|
138 |
+
padding: 20px;
|
139 |
+
border-radius: 6px;
|
140 |
+
white-space: pre-wrap;
|
141 |
+
word-wrap: break-word;
|
142 |
+
font-family: 'Roboto Mono', monospace;
|
143 |
+
font-size: 14px;
|
144 |
+
line-height: 1.6;
|
145 |
+
color: #34495e;
|
146 |
+
border-left: 4px solid #3498db;
|
147 |
+
}
|
148 |
+
|
149 |
+
.response-section {
|
150 |
+
margin-bottom: 30px;
|
151 |
+
}
|
152 |
+
|
153 |
+
.response-content {
|
154 |
+
font-family: 'Roboto', sans-serif;
|
155 |
+
font-size: 16px;
|
156 |
+
line-height: 1.8;
|
157 |
+
color: #333;
|
158 |
+
}
|
159 |
+
|
160 |
+
.highlight {
|
161 |
+
background-color: #f1c40f;
|
162 |
+
padding: 2px 4px;
|
163 |
+
border-radius: 3px;
|
164 |
+
}
|
165 |
+
.back-button {
|
166 |
+
position: fixed;
|
167 |
+
top: 20px;
|
168 |
+
left: 20px;
|
169 |
+
background-color: #3498db;
|
170 |
+
color: white;
|
171 |
+
border: none;
|
172 |
+
border-radius: 50%;
|
173 |
+
width: 50px;
|
174 |
+
height: 50px;
|
175 |
+
font-size: 24px;
|
176 |
+
cursor: pointer;
|
177 |
+
transition: all 0.3s ease;
|
178 |
+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
179 |
+
display: flex;
|
180 |
+
justify-content: center;
|
181 |
+
align-items: center;
|
182 |
+
text-decoration: none;
|
183 |
+
}
|
184 |
+
|
185 |
+
.back-button:hover {
|
186 |
+
background-color: #2980b9;
|
187 |
+
transform: scale(1.1);
|
188 |
+
}
|
189 |
+
|
190 |
+
.back-button i {
|
191 |
+
transition: transform 0.3s ease;
|
192 |
+
}
|
193 |
+
|
194 |
+
.back-button:hover i {
|
195 |
+
transform: translateX(-5px);
|
196 |
+
}
|
197 |
+
</style>
|
198 |
+
|
199 |
+
|
200 |
+
</head>
|
201 |
+
<body>
|
202 |
+
<a href="teacher" class="back-button" title="Back to Home">
|
203 |
+
<i class="fas fa-arrow-left"></i>
|
204 |
+
</a>
|
205 |
+
<h1>Slow Learners Management</h1>
|
206 |
+
<div class="icon-container">
|
207 |
+
<i class="fas fa-graduation-cap"></i>
|
208 |
+
<i class="fas fa-clock"></i>
|
209 |
+
<i class="fas fa-calendar-alt"></i>
|
210 |
+
</div>
|
211 |
+
<form id="timetableForm">
|
212 |
+
<label for="academic_topics"><i class="fas fa-book"></i> Enter a list of academic topics, separated by commas:</label><br>
|
213 |
+
<textarea name="academic_topics" id="academic_topics" rows="4" required></textarea><br>
|
214 |
+
|
215 |
+
<label for="hours_per_day"><i class="fas fa-hourglass-half"></i> Enter the number of hours per day:</label><br>
|
216 |
+
<input type="number" name="hours_per_day" id="hours_per_day" required><br>
|
217 |
+
|
218 |
+
<input type="submit" value="Generate Timetable">
|
219 |
+
</form>
|
220 |
+
|
221 |
+
<div id="loading">
|
222 |
+
<div class="loader"></div>
|
223 |
+
<p>Generating timetable...</p>
|
224 |
+
</div>
|
225 |
+
|
226 |
+
<div id="result">
|
227 |
+
<div class="response-section">
|
228 |
+
<h2><i class="fas fa-list-ul"></i> Clustered Topics</h2>
|
229 |
+
<div class="response-content">
|
230 |
+
<pre id="clusteredTopics"></pre>
|
231 |
+
</div>
|
232 |
+
</div>
|
233 |
+
|
234 |
+
<div class="response-section">
|
235 |
+
<h2><i class="fas fa-table"></i> Special Timetable</h2>
|
236 |
+
<div class="response-content">
|
237 |
+
<pre id="specialTimetable"></pre>
|
238 |
+
</div>
|
239 |
+
</div>
|
240 |
+
</div>
|
241 |
+
|
242 |
+
<script>
|
243 |
+
document.getElementById('timetableForm').addEventListener('submit', function(e) {
|
244 |
+
e.preventDefault();
|
245 |
+
|
246 |
+
document.getElementById('loading').style.display = 'block';
|
247 |
+
document.getElementById('result').style.display = 'none';
|
248 |
+
|
249 |
+
var formData = new FormData(this);
|
250 |
+
|
251 |
+
fetch('/generate_ai_timetable', {
|
252 |
+
method: 'POST',
|
253 |
+
body: formData
|
254 |
+
})
|
255 |
+
.then(response => response.json())
|
256 |
+
.then(data => {
|
257 |
+
document.getElementById('clusteredTopics').textContent = data.clustered_topics;
|
258 |
+
document.getElementById('specialTimetable').textContent = data.special_timetable;
|
259 |
+
document.getElementById('loading').style.display = 'none';
|
260 |
+
document.getElementById('result').style.display = 'block';
|
261 |
+
})
|
262 |
+
.catch(error => {
|
263 |
+
console.error('Error:', error);
|
264 |
+
document.getElementById('loading').style.display = 'none';
|
265 |
+
alert('An error occurred. Please try again.');
|
266 |
+
});
|
267 |
+
});
|
268 |
+
</script>
|
269 |
+
</body>
|
270 |
+
</html>
|
templates/homework.html
ADDED
@@ -0,0 +1,352 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>SmartLearn - AI-Powered Education Platform</title>
|
7 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
8 |
+
<link rel="stylesheet" href="{{ url_for('static', filename='student_homework.css') }}">
|
9 |
+
|
10 |
+
</head>
|
11 |
+
<body>
|
12 |
+
<style>
|
13 |
+
.logo {
|
14 |
+
font-size: 28px;
|
15 |
+
font-weight: 700;
|
16 |
+
color: #fff;
|
17 |
+
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
18 |
+
display: flex;
|
19 |
+
align-items: center;
|
20 |
+
}
|
21 |
+
.spinner {
|
22 |
+
text-align: center;
|
23 |
+
font-size: 1.5em;
|
24 |
+
margin-top: 10px;
|
25 |
+
}
|
26 |
+
|
27 |
+
.logo img {
|
28 |
+
height: 40px;
|
29 |
+
margin-right: 10px;
|
30 |
+
}
|
31 |
+
|
32 |
+
|
33 |
+
.nav-bar {
|
34 |
+
background-color: #fff;
|
35 |
+
padding: 10px 0;
|
36 |
+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
37 |
+
}
|
38 |
+
|
39 |
+
.nav-bar ul {
|
40 |
+
list-style-type: none;
|
41 |
+
margin: 0;
|
42 |
+
padding: 0;
|
43 |
+
display: flex;
|
44 |
+
justify-content: center;
|
45 |
+
align-items: center;
|
46 |
+
}
|
47 |
+
|
48 |
+
.nav-bar li {
|
49 |
+
margin: 0 15px;
|
50 |
+
}
|
51 |
+
|
52 |
+
.nav-bar a {
|
53 |
+
text-decoration: none;
|
54 |
+
color: var(--text-color);
|
55 |
+
font-weight: 600;
|
56 |
+
transition: all 0.3s ease;
|
57 |
+
display: flex;
|
58 |
+
align-items: center;
|
59 |
+
}
|
60 |
+
|
61 |
+
.nav-bar a img {
|
62 |
+
height: 24px;
|
63 |
+
margin-right: 5px;
|
64 |
+
}
|
65 |
+
|
66 |
+
</style>
|
67 |
+
|
68 |
+
<body>
|
69 |
+
<header>
|
70 |
+
<div class="container">
|
71 |
+
<div class="header-content">
|
72 |
+
<div class="logo">
|
73 |
+
<img src="../static/smart-learn.jpeg" alt="">SmartLearn
|
74 |
+
</div>
|
75 |
+
<div class="search-bar">
|
76 |
+
<input type="text" placeholder="Search for anything">
|
77 |
+
<div class="ai-tools">
|
78 |
+
<i class="fas fa-camera" title="Photo Question Answering"></i>
|
79 |
+
<i class="fas fa-brain" title="AI Tutor"></i>
|
80 |
+
<i class="fas fa-robot" title="AI Assistant"></i>
|
81 |
+
</div>
|
82 |
+
</div>
|
83 |
+
<div class="user-actions">
|
84 |
+
<span class="points-display">1500 pts</span>
|
85 |
+
<div class="profile-icon">A</div>
|
86 |
+
</div>
|
87 |
+
</div>
|
88 |
+
</div>
|
89 |
+
</header>
|
90 |
+
|
91 |
+
<nav class="nav-bar">
|
92 |
+
<ul>
|
93 |
+
<li><a href="{{ url_for('student') }}"><img src="https://cdn-icons-png.flaticon.com/512/1946/1946488.png" alt="Home">Home</a></li>
|
94 |
+
<li><a href="{{ url_for('student') }}#ai-powered-tools"><img src="https://www.kalupurbank.com/wp-content/uploads/2023/02/robot-chatbot-icon-sign-free-vector.webp" alt="Home">Ai Tools</a></li>
|
95 |
+
<li><a href="{{ url_for('homework') }}"><img src="https://cdn-icons-png.flaticon.com/512/1828/1828919.png" alt="Homework">Homework</a></li>
|
96 |
+
<li><a href="{{ url_for('student_courses') }}"><img src="https://cdn-icons-png.flaticon.com/512/1048/1048953.png" alt="Courses">Courses</a></li>
|
97 |
+
<li><a href="{{ url_for('speak') }}"><img src="https://cdn-icons-png.flaticon.com/512/4712/4712026.png" alt="Speak With AI">Speak With AI</a></li>
|
98 |
+
<li><a href="{{ url_for('summarise_video') }}"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/1280px-YouTube_full-color_icon_%282017%29.svg.png" alt="Ssummarise_video">summarise_video</a></li>
|
99 |
+
</ul>
|
100 |
+
</nav>
|
101 |
+
|
102 |
+
<div class="container">
|
103 |
+
<div class="main-content">
|
104 |
+
<h1>Homework & Assignments</h1>
|
105 |
+
|
106 |
+
<div class="filter-buttons">
|
107 |
+
<button class="filter-btn active">All</button>
|
108 |
+
<button class="filter-btn">Pending</button>
|
109 |
+
<button class="filter-btn">Completed</button>
|
110 |
+
</div>
|
111 |
+
|
112 |
+
<div class="homework-grid">
|
113 |
+
<div class="homework-item">
|
114 |
+
<h3>Math Assignment: Calculus Basics</h3>
|
115 |
+
<p><i class="fas fa-calendar"></i> Due: July 30, 2024</p>
|
116 |
+
<p><i class="fas fa-clock"></i> Estimated time: 30 min</p>
|
117 |
+
<a href="#" class="btn" onclick="showQuestions('calculus')">Start Assignment</a>
|
118 |
+
<div class="questions" id="calculus">
|
119 |
+
<div class="spinner" id="loading-spinner" style="display: none;">
|
120 |
+
<i class="fas fa-circle-notch fa-spin"></i> Loading...
|
121 |
+
</div>
|
122 |
+
</div>
|
123 |
+
</div>
|
124 |
+
<div class="homework-item">
|
125 |
+
<h3>Science Project: Ecosystem Model</h3>
|
126 |
+
<p><i class="fas fa-calendar"></i> Due: August 5, 2024</p>
|
127 |
+
<p><i class="fas fa-clock"></i> Estimated time: 4 hours</p>
|
128 |
+
<a href="#" class="btn" onclick="showQuestions('ecosystem')">Continue Project</a>
|
129 |
+
<div class="questions" id="ecosystem"></div>
|
130 |
+
</div>
|
131 |
+
<div class="homework-item completed">
|
132 |
+
<h3>History Essay: Industrial Revolution</h3>
|
133 |
+
<p><i class="fas fa-check-circle"></i> Completed</p>
|
134 |
+
<p><i class="fas fa-star"></i> Score: 95/100</p>
|
135 |
+
<a href="#" class="btn" onclick="showQuestions('industrial')">View Feedback</a>
|
136 |
+
<div class="questions" id="industrial"></div>
|
137 |
+
</div>
|
138 |
+
<div class="homework-item">
|
139 |
+
<h3>Language Arts: Book Report</h3>
|
140 |
+
<p><i class="fas fa-calendar"></i> Due: August 10, 2024</p>
|
141 |
+
<p><i class="fas fa-clock"></i> Estimated time: 3 hours</p>
|
142 |
+
<a href="#" class="btn" onclick="showQuestions('bookReport')">Start Report</a>
|
143 |
+
<div class="questions" id="bookReport"></div>
|
144 |
+
</div>
|
145 |
+
<div class="homework-item completed">
|
146 |
+
<h3>Computer Science: Python Quiz</h3>
|
147 |
+
<p><i class="fas fa-check-circle"></i> Completed</p>
|
148 |
+
<p><i class="fas fa-star"></i> Score: 88/100</p>
|
149 |
+
<a href="#" class="btn" onclick="showQuestions('pythonQuiz')">Review Quiz</a>
|
150 |
+
<div class="questions" id="pythonQuiz"></div>
|
151 |
+
</div>
|
152 |
+
<div class="homework-item">
|
153 |
+
<h3>Physics Lab: Gravity Experiment</h3>
|
154 |
+
<p><i class="fas fa-calendar"></i> Due: August 15, 2024</p>
|
155 |
+
<p><i class="fas fa-clock"></i> Estimated time: 2 hours</p>
|
156 |
+
<a href="#" class="btn" onclick="showQuestions('gravityExperiment')">Start Lab</a>
|
157 |
+
<div class="questions" id="gravityExperiment"></div>
|
158 |
+
</div>
|
159 |
+
<div class="homework-item">
|
160 |
+
<h3>Chemistry: Periodic Table Quiz</h3>
|
161 |
+
<p><i class="fas fa-calendar"></i> Due: August 20, 2024</p>
|
162 |
+
<p><i class="fas fa-clock"></i> Estimated time: 1 hour</p>
|
163 |
+
<a href="#" class="btn" onclick="showQuestions('periodicQuiz')">Start Quiz</a>
|
164 |
+
<div class="questions" id="periodicQuiz"></div>
|
165 |
+
</div>
|
166 |
+
<div class="homework-item">
|
167 |
+
<h3>Art Project: Self-Portrait</h3>
|
168 |
+
<p><i class="fas fa-calendar"></i> Due: August 25, 2024</p>
|
169 |
+
<p><i class="fas fa-clock"></i> Estimated time: 5 hours</p>
|
170 |
+
<a href="#" class="btn" onclick="showQuestions('selfPortrait')">Begin Project</a>
|
171 |
+
<div class="questions" id="selfPortrait"></div>
|
172 |
+
</div>
|
173 |
+
</div>
|
174 |
+
</div>
|
175 |
+
</div>
|
176 |
+
|
177 |
+
<script>
|
178 |
+
// Predefined static questions, marks, and feedback for each assignment
|
179 |
+
const questions = {
|
180 |
+
calculus: {
|
181 |
+
questions: [
|
182 |
+
"What is the derivative of sin(x)?",
|
183 |
+
"Explain the concept of a limit in calculus."
|
184 |
+
]
|
185 |
+
},
|
186 |
+
ecosystem: {
|
187 |
+
questions: [
|
188 |
+
"Describe the energy flow in an ecosystem.",
|
189 |
+
"What are the main components of an ecosystem?"
|
190 |
+
]
|
191 |
+
},
|
192 |
+
industrial: {
|
193 |
+
questions: [],
|
194 |
+
mark: 95,
|
195 |
+
feedback: "Excellent analysis and well-structured essay on the Industrial Revolution."
|
196 |
+
},
|
197 |
+
bookReport: {
|
198 |
+
questions: [
|
199 |
+
"Summarize the main plot of the book.",
|
200 |
+
"What are the key themes explored in the book?"
|
201 |
+
]
|
202 |
+
},
|
203 |
+
pythonQuiz: {
|
204 |
+
questions: [],
|
205 |
+
mark: 88,
|
206 |
+
feedback: "Good understanding of Python basics. Pay more attention to edge cases."
|
207 |
+
},
|
208 |
+
gravityExperiment: {
|
209 |
+
questions: [
|
210 |
+
"What is the formula for gravitational force?",
|
211 |
+
"Describe the experiment setup for measuring gravity."
|
212 |
+
]
|
213 |
+
},
|
214 |
+
periodicQuiz: {
|
215 |
+
questions: [
|
216 |
+
"What is the atomic number of Oxygen?",
|
217 |
+
"Explain the significance of periods and groups in the periodic table."
|
218 |
+
]
|
219 |
+
},
|
220 |
+
selfPortrait: {
|
221 |
+
questions: [
|
222 |
+
"What materials will you use for your self-portrait?",
|
223 |
+
"Describe your initial concept for the self-portrait."
|
224 |
+
]
|
225 |
+
}
|
226 |
+
};
|
227 |
+
|
228 |
+
// Function to display questions and feedback
|
229 |
+
function showQuestions(id) {
|
230 |
+
const container = document.getElementById(id);
|
231 |
+
container.innerHTML = ''; // Clear any previous content
|
232 |
+
|
233 |
+
const assignment = questions[id];
|
234 |
+
|
235 |
+
if (assignment.questions && assignment.questions.length > 0) {
|
236 |
+
assignment.questions.forEach(question => {
|
237 |
+
const questionDiv = document.createElement('div');
|
238 |
+
questionDiv.classList.add('question');
|
239 |
+
questionDiv.textContent = question;
|
240 |
+
container.appendChild(questionDiv);
|
241 |
+
});
|
242 |
+
}
|
243 |
+
|
244 |
+
if (assignment.mark !== undefined && assignment.feedback !== undefined) {
|
245 |
+
const feedbackDiv = document.createElement('div');
|
246 |
+
feedbackDiv.classList.add('feedback');
|
247 |
+
feedbackDiv.innerHTML = `<strong>Mark:</strong> ${assignment.mark}/100<br><strong>Feedback:</strong> ${assignment.feedback}`;
|
248 |
+
container.appendChild(feedbackDiv);
|
249 |
+
}
|
250 |
+
}
|
251 |
+
|
252 |
+
// Simple filter functionality
|
253 |
+
const filterButtons = document.querySelectorAll('.filter-btn');
|
254 |
+
const homeworkItems = document.querySelectorAll('.homework-item');
|
255 |
+
|
256 |
+
filterButtons.forEach(button => {
|
257 |
+
button.addEventListener('click', () => {
|
258 |
+
const filter = button.textContent.toLowerCase();
|
259 |
+
|
260 |
+
filterButtons.forEach(btn => btn.classList.remove('active'));
|
261 |
+
button.classList.add('active');
|
262 |
+
|
263 |
+
homeworkItems.forEach(item => {
|
264 |
+
if (filter === 'all' ||
|
265 |
+
(filter === 'pending' && !item.classList.contains('completed')) ||
|
266 |
+
(filter === 'completed' && item.classList.contains('completed'))) {
|
267 |
+
item.style.display = 'block';
|
268 |
+
} else {
|
269 |
+
item.style.display = 'none';
|
270 |
+
}
|
271 |
+
});
|
272 |
+
});
|
273 |
+
});
|
274 |
+
</script>
|
275 |
+
<script>
|
276 |
+
function showQuestions(assignmentId) {
|
277 |
+
const questionsDiv = document.getElementById(assignmentId);
|
278 |
+
const loadingSpinner = document.getElementById('loading-spinner');
|
279 |
+
|
280 |
+
loadingSpinner.style.display = 'block';
|
281 |
+
|
282 |
+
fetch('/generate-questions-hw')
|
283 |
+
.then(response => response.json())
|
284 |
+
.then(data => {
|
285 |
+
questionsDiv.innerHTML = '';
|
286 |
+
loadingSpinner.style.display = 'none';
|
287 |
+
|
288 |
+
data.questions.forEach((question, index) => {
|
289 |
+
const questionElement = document.createElement('div');
|
290 |
+
questionElement.innerHTML = `
|
291 |
+
<p>${index + 1}. ${question}</p>
|
292 |
+
<textarea id="answer-${index}" rows="3" cols="50"></textarea>
|
293 |
+
`;
|
294 |
+
questionsDiv.appendChild(questionElement);
|
295 |
+
});
|
296 |
+
|
297 |
+
const submitButton = document.createElement('button');
|
298 |
+
submitButton.textContent = 'Submit Answers';
|
299 |
+
submitButton.onclick = () => submitAnswers(assignmentId, data.questions);
|
300 |
+
questionsDiv.appendChild(submitButton);
|
301 |
+
})
|
302 |
+
.catch(error => {
|
303 |
+
console.error('Error:', error);
|
304 |
+
loadingSpinner.style.display = 'none';
|
305 |
+
questionsDiv.innerHTML = '<p>Error loading questions. Please try again.</p>';
|
306 |
+
});
|
307 |
+
}
|
308 |
+
|
309 |
+
function submitAnswers(assignmentId, questions) {
|
310 |
+
const questionsDiv = document.getElementById(assignmentId);
|
311 |
+
const answers = questions.map((_, index) => document.getElementById(`answer-${index}`).value);
|
312 |
+
|
313 |
+
questionsDiv.innerHTML = '<p>Evaluating answers...</p>';
|
314 |
+
|
315 |
+
fetch('/evaluate-answers', {
|
316 |
+
method: 'POST',
|
317 |
+
headers: {
|
318 |
+
'Content-Type': 'application/json',
|
319 |
+
},
|
320 |
+
body: JSON.stringify({questions, answers}),
|
321 |
+
})
|
322 |
+
.then(response => response.json())
|
323 |
+
.then(data => {
|
324 |
+
displayEvaluations(assignmentId, questions, answers, data.evaluations);
|
325 |
+
})
|
326 |
+
.catch(error => {
|
327 |
+
console.error('Error:', error);
|
328 |
+
questionsDiv.innerHTML = '<p>Error evaluating answers. Please try again.</p>';
|
329 |
+
});
|
330 |
+
}
|
331 |
+
|
332 |
+
function displayEvaluations(assignmentId, questions, answers, evaluations) {
|
333 |
+
const questionsDiv = document.getElementById(assignmentId);
|
334 |
+
questionsDiv.innerHTML = '<h3>Evaluation Results:</h3>';
|
335 |
+
|
336 |
+
questions.forEach((question, index) => {
|
337 |
+
const answer = answers[index];
|
338 |
+
const evaluation = evaluations[index];
|
339 |
+
|
340 |
+
const resultElement = document.createElement('div');
|
341 |
+
resultElement.innerHTML = `
|
342 |
+
<p><strong>Question ${index + 1}:</strong> ${question}</p>
|
343 |
+
<p><strong>Your Answer:</strong> ${answer}</p>
|
344 |
+
<p><strong>Evaluation:</strong></p>
|
345 |
+
<pre>${evaluation}</pre>
|
346 |
+
`;
|
347 |
+
questionsDiv.appendChild(resultElement);
|
348 |
+
});
|
349 |
+
}
|
350 |
+
</script>
|
351 |
+
</body>
|
352 |
+
</html>
|
templates/index.html
ADDED
@@ -0,0 +1,273 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Smart-Learn</title>
|
7 |
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
|
8 |
+
<style>
|
9 |
+
body, html {
|
10 |
+
margin: 0;
|
11 |
+
padding: 0;
|
12 |
+
height: 100%;
|
13 |
+
font-family: 'Roboto', sans-serif;
|
14 |
+
color: #fff;
|
15 |
+
overflow: hidden;
|
16 |
+
}
|
17 |
+
.video-container {
|
18 |
+
position: fixed;
|
19 |
+
top: 0;
|
20 |
+
left: 0;
|
21 |
+
width: 100%;
|
22 |
+
height: 100%;
|
23 |
+
z-index: -1;
|
24 |
+
overflow: hidden;
|
25 |
+
}
|
26 |
+
#background-video {
|
27 |
+
min-width: 100%;
|
28 |
+
min-height: 100%;
|
29 |
+
width: auto;
|
30 |
+
height: auto;
|
31 |
+
position: absolute;
|
32 |
+
top: 50%;
|
33 |
+
left: 50%;
|
34 |
+
transform: translate(-50%, -50%);
|
35 |
+
}
|
36 |
+
.content {
|
37 |
+
position: relative;
|
38 |
+
z-index: 1;
|
39 |
+
text-align: center;
|
40 |
+
padding: 20px;
|
41 |
+
background: rgba(0, 0, 0, 0.5);
|
42 |
+
min-height: 100vh;
|
43 |
+
display: flex;
|
44 |
+
flex-direction: column;
|
45 |
+
justify-content: space-between;
|
46 |
+
}
|
47 |
+
.header {
|
48 |
+
padding: 20px 0;
|
49 |
+
}
|
50 |
+
.logo-circle {
|
51 |
+
width: 150px;
|
52 |
+
height: 150px;
|
53 |
+
border-radius: 50%;
|
54 |
+
overflow: hidden;
|
55 |
+
margin: 0 auto;
|
56 |
+
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
57 |
+
}
|
58 |
+
.logo-circle img {
|
59 |
+
width: 100%;
|
60 |
+
height: 100%;
|
61 |
+
object-fit: cover;
|
62 |
+
}
|
63 |
+
.school-name {
|
64 |
+
font-size: 2.5em;
|
65 |
+
margin-top: 20px;
|
66 |
+
color: #ffffff;
|
67 |
+
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
68 |
+
}
|
69 |
+
.login-text {
|
70 |
+
font-size: 1.2em;
|
71 |
+
margin-top: 20px;
|
72 |
+
margin-bottom: 10px;
|
73 |
+
}
|
74 |
+
.login-buttons {
|
75 |
+
margin-top: 10px;
|
76 |
+
}
|
77 |
+
.login-button {
|
78 |
+
background-color: rgba(52, 152, 219, 0.8);
|
79 |
+
border: none;
|
80 |
+
color: white;
|
81 |
+
padding: 12px 24px;
|
82 |
+
text-align: center;
|
83 |
+
text-decoration: none;
|
84 |
+
display: inline-block;
|
85 |
+
font-size: 16px;
|
86 |
+
margin: 4px 10px;
|
87 |
+
cursor: pointer;
|
88 |
+
border-radius: 25px;
|
89 |
+
transition: background-color 0.3s, transform 0.3s;
|
90 |
+
}
|
91 |
+
.login-button:hover {
|
92 |
+
background-color: rgba(41, 128, 185, 0.9);
|
93 |
+
transform: translateY(-2px);
|
94 |
+
}
|
95 |
+
.modal {
|
96 |
+
display: none;
|
97 |
+
position: fixed;
|
98 |
+
z-index: 2;
|
99 |
+
left: 0;
|
100 |
+
top: 0;
|
101 |
+
width: 100%;
|
102 |
+
height: 100%;
|
103 |
+
overflow: auto;
|
104 |
+
background-color: rgba(0,0,0,0.8);
|
105 |
+
}
|
106 |
+
.modal-content {
|
107 |
+
background-color: #fefefe;
|
108 |
+
margin: 10% auto;
|
109 |
+
padding: 30px;
|
110 |
+
border: 1px solid #888;
|
111 |
+
width: 300px;
|
112 |
+
border-radius: 8px;
|
113 |
+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
114 |
+
}
|
115 |
+
.close {
|
116 |
+
color: #aaa;
|
117 |
+
float: right;
|
118 |
+
font-size: 28px;
|
119 |
+
font-weight: bold;
|
120 |
+
}
|
121 |
+
.close:hover,
|
122 |
+
.close:focus {
|
123 |
+
color: black;
|
124 |
+
text-decoration: none;
|
125 |
+
cursor: pointer;
|
126 |
+
}
|
127 |
+
#login-form input {
|
128 |
+
width: 100%;
|
129 |
+
padding: 10px;
|
130 |
+
margin: 10px 0;
|
131 |
+
border: 1px solid #ddd;
|
132 |
+
border-radius: 4px;
|
133 |
+
}
|
134 |
+
#login-form button {
|
135 |
+
width: 100%;
|
136 |
+
padding: 10px;
|
137 |
+
background-color: #2ecc71;
|
138 |
+
color: white;
|
139 |
+
border: none;
|
140 |
+
border-radius: 4px;
|
141 |
+
cursor: pointer;
|
142 |
+
transition: background-color 0.3s;
|
143 |
+
}
|
144 |
+
#login-form button:hover {
|
145 |
+
background-color: #27ae60;
|
146 |
+
}
|
147 |
+
.info-section {
|
148 |
+
width: 100% ;
|
149 |
+
color: #ecf0f1;
|
150 |
+
padding: 20px 0;
|
151 |
+
text-align: center;
|
152 |
+
}
|
153 |
+
.contact-info {
|
154 |
+
max-width: 600px;
|
155 |
+
margin: 0 auto;
|
156 |
+
}
|
157 |
+
#login-title {
|
158 |
+
color: #333;
|
159 |
+
margin-bottom: 15px;
|
160 |
+
}
|
161 |
+
#login-instructions {
|
162 |
+
color: #666;
|
163 |
+
margin-bottom: 20px;
|
164 |
+
}
|
165 |
+
</style>
|
166 |
+
</head>
|
167 |
+
|
168 |
+
<body>
|
169 |
+
<div class="video-container">
|
170 |
+
<video autoplay muted loop playsinline id="background-video">
|
171 |
+
<source src="../static/background.mp4" type="video/mp4">
|
172 |
+
<source src="../static/background.webm" type="video/webm">
|
173 |
+
Your browser does not support the video tag.
|
174 |
+
</video>
|
175 |
+
</div>
|
176 |
+
|
177 |
+
<div class="content" id="main-content">
|
178 |
+
<div class="header">
|
179 |
+
<div class="logo-circle">
|
180 |
+
<img src="../static/smart-learn.jpeg" alt="Smart Learn Logo">
|
181 |
+
</div>
|
182 |
+
<h1 class="school-name">Smart-Learn</h1>
|
183 |
+
|
184 |
+
<!-- Login Text and Buttons -->
|
185 |
+
<p class="login-text">Login whether you are a student or teacher</p>
|
186 |
+
<div class="login-buttons">
|
187 |
+
<button class="login-button" onclick="showLogin('student')">Student Portal</button>
|
188 |
+
<button class="login-button" onclick="showLogin('teacher')">Teacher Portal</button>
|
189 |
+
</div>
|
190 |
+
</div>
|
191 |
+
|
192 |
+
<!-- Contact Information Section -->
|
193 |
+
<div class="info-section">
|
194 |
+
<div class="contact-info">
|
195 |
+
<h2>Contact Information</h2>
|
196 |
+
<p><strong>Email:</strong> [email protected]</p>
|
197 |
+
<p><strong>Phone:</strong> (123) 456-7890</p>
|
198 |
+
<p><strong>Address:</strong> 123 Education Street, Knowledge City, ST 12345</p>
|
199 |
+
</div>
|
200 |
+
</div>
|
201 |
+
</div>
|
202 |
+
|
203 |
+
<!-- Login Modal -->
|
204 |
+
<div id="login-modal" class="modal">
|
205 |
+
<div class="modal-content">
|
206 |
+
<span class="close" onclick="closeLogin()">×</span>
|
207 |
+
<h2 id="login-title"></h2>
|
208 |
+
<p id="login-instructions">Enter your details:</p>
|
209 |
+
<form id="login-form">
|
210 |
+
<input type="text" id="username" name="username" placeholder="Username" required>
|
211 |
+
<input type="password" id="password" name="password" placeholder="Password Type '12345'" required>
|
212 |
+
<button type="submit">Login</button>
|
213 |
+
</form>
|
214 |
+
<p id="login-error" style="color: red; display: none;">Invalid username or password. Please try again.</p>
|
215 |
+
</div>
|
216 |
+
</div>
|
217 |
+
|
218 |
+
<script>
|
219 |
+
document.addEventListener('DOMContentLoaded', function() {
|
220 |
+
var video = document.getElementById('background-video');
|
221 |
+
video.play().catch(function(error) {
|
222 |
+
console.log("Auto-play was prevented");
|
223 |
+
});
|
224 |
+
});
|
225 |
+
let currentLoginType = '';
|
226 |
+
|
227 |
+
function showLogin(type) {
|
228 |
+
currentLoginType = type;
|
229 |
+
document.getElementById('main-content').style.display = 'none';
|
230 |
+
document.getElementById('login-modal').style.display = 'block';
|
231 |
+
document.getElementById('login-title').innerText = type.charAt(0).toUpperCase() + type.slice(1) + ' Login';
|
232 |
+
document.getElementById('login-error').style.display = 'none';
|
233 |
+
}
|
234 |
+
|
235 |
+
function closeLogin() {
|
236 |
+
document.getElementById('login-modal').style.display = 'none';
|
237 |
+
document.getElementById('main-content').style.display = 'flex';
|
238 |
+
}
|
239 |
+
|
240 |
+
document.getElementById('login-form').addEventListener('submit', function(event) {
|
241 |
+
event.preventDefault();
|
242 |
+
const username = document.getElementById('username').value;
|
243 |
+
const password = document.getElementById('password').value;
|
244 |
+
|
245 |
+
fetch('/' + currentLoginType + '_login', {
|
246 |
+
method: 'POST',
|
247 |
+
headers: {
|
248 |
+
'Content-Type': 'application/json',
|
249 |
+
},
|
250 |
+
body: JSON.stringify({ name: username, password: password }),
|
251 |
+
})
|
252 |
+
.then(response => response.json())
|
253 |
+
.then(data => {
|
254 |
+
if (data.success) {
|
255 |
+
window.location.href = '/' + currentLoginType;
|
256 |
+
} else {
|
257 |
+
document.getElementById('login-error').style.display = 'block';
|
258 |
+
}
|
259 |
+
})
|
260 |
+
.catch(error => {
|
261 |
+
console.error('Error:', error);
|
262 |
+
});
|
263 |
+
});
|
264 |
+
|
265 |
+
// Close the modal if clicked outside
|
266 |
+
window.onclick = function(event) {
|
267 |
+
if (event.target == document.getElementById('login-modal')) {
|
268 |
+
closeLogin();
|
269 |
+
}
|
270 |
+
}
|
271 |
+
</script>
|
272 |
+
</body>
|
273 |
+
</html>
|
templates/student.html
ADDED
@@ -0,0 +1,952 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>SmartLearn - AI-Powered Education Platform</title>
|
7 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
8 |
+
|
9 |
+
<style>
|
10 |
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
|
11 |
+
|
12 |
+
:root {
|
13 |
+
--primary-color: #4e54c8;
|
14 |
+
--secondary-color: #8f94fb;
|
15 |
+
--accent-color: #ff6b6b;
|
16 |
+
--text-color: #333;
|
17 |
+
--bg-color: #f9f9f9;
|
18 |
+
}
|
19 |
+
|
20 |
+
body {
|
21 |
+
font-family: 'Poppins', sans-serif;
|
22 |
+
margin: 0;
|
23 |
+
padding: 0;
|
24 |
+
background-color: var(--bg-color);
|
25 |
+
color: var(--text-color);
|
26 |
+
line-height: 1.6;
|
27 |
+
}
|
28 |
+
|
29 |
+
.container {
|
30 |
+
max-width: 1340px;
|
31 |
+
margin: 0 auto;
|
32 |
+
padding: 0 20px;
|
33 |
+
}
|
34 |
+
|
35 |
+
header {
|
36 |
+
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
37 |
+
padding: 15px 0;
|
38 |
+
position: sticky;
|
39 |
+
top: 0;
|
40 |
+
z-index: 1000;
|
41 |
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
42 |
+
}
|
43 |
+
|
44 |
+
.header-content {
|
45 |
+
display: flex;
|
46 |
+
justify-content: space-between;
|
47 |
+
align-items: center;
|
48 |
+
}
|
49 |
+
|
50 |
+
.logo {
|
51 |
+
font-size: 28px;
|
52 |
+
font-weight: 700;
|
53 |
+
color: #fff;
|
54 |
+
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
55 |
+
display: flex;
|
56 |
+
align-items: center;
|
57 |
+
}
|
58 |
+
|
59 |
+
.logo img {
|
60 |
+
height: 40px;
|
61 |
+
margin-right: 10px;
|
62 |
+
}
|
63 |
+
|
64 |
+
|
65 |
+
.search-bar {
|
66 |
+
flex-grow: 1;
|
67 |
+
margin: 0 20px;
|
68 |
+
position: relative;
|
69 |
+
max-width: 700px;
|
70 |
+
}
|
71 |
+
|
72 |
+
.search-bar input {
|
73 |
+
width: 100%;
|
74 |
+
padding: 12px 20px;
|
75 |
+
border: none;
|
76 |
+
border-radius: 30px;
|
77 |
+
font-size: 16px;
|
78 |
+
background-color: rgba(255,255,255,0.2);
|
79 |
+
color: #fff;
|
80 |
+
transition: all 0.3s ease;
|
81 |
+
}
|
82 |
+
|
83 |
+
.search-bar input::placeholder {
|
84 |
+
color: rgba(255,255,255,0.7);
|
85 |
+
}
|
86 |
+
|
87 |
+
.search-bar input:focus {
|
88 |
+
background-color: rgba(255,255,255,0.3);
|
89 |
+
outline: none;
|
90 |
+
}
|
91 |
+
|
92 |
+
.ai-tools {
|
93 |
+
position: absolute;
|
94 |
+
right: 10px;
|
95 |
+
top: 50%;
|
96 |
+
transform: translateY(-50%);
|
97 |
+
}
|
98 |
+
|
99 |
+
.ai-tools i {
|
100 |
+
font-size: 20px;
|
101 |
+
margin-left: 15px;
|
102 |
+
cursor: pointer;
|
103 |
+
color: #fff;
|
104 |
+
transition: all 0.3s ease;
|
105 |
+
}
|
106 |
+
|
107 |
+
.ai-tools i:hover {
|
108 |
+
color: var(--accent-color);
|
109 |
+
transform: scale(1.1);
|
110 |
+
}
|
111 |
+
|
112 |
+
.user-actions {
|
113 |
+
display: flex;
|
114 |
+
align-items: center;
|
115 |
+
}
|
116 |
+
|
117 |
+
.points-display {
|
118 |
+
font-size: 18px;
|
119 |
+
font-weight: bold;
|
120 |
+
color: #fff;
|
121 |
+
margin-right: 20px;
|
122 |
+
background-color: rgba(255,255,255,0.2);
|
123 |
+
padding: 5px 15px;
|
124 |
+
border-radius: 20px;
|
125 |
+
}
|
126 |
+
|
127 |
+
.profile-icon {
|
128 |
+
width: 40px;
|
129 |
+
height: 40px;
|
130 |
+
border-radius: 50%;
|
131 |
+
background-color: var(--accent-color);
|
132 |
+
display: flex;
|
133 |
+
align-items: center;
|
134 |
+
justify-content: center;
|
135 |
+
font-weight: bold;
|
136 |
+
color: #fff;
|
137 |
+
cursor: pointer;
|
138 |
+
transition: all 0.3s ease;
|
139 |
+
}
|
140 |
+
|
141 |
+
.profile-icon:hover {
|
142 |
+
transform: scale(1.1);
|
143 |
+
}
|
144 |
+
|
145 |
+
.nav-bar {
|
146 |
+
background-color: #fff;
|
147 |
+
padding: 10px 0;
|
148 |
+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
149 |
+
}
|
150 |
+
|
151 |
+
.nav-bar ul {
|
152 |
+
list-style-type: none;
|
153 |
+
margin: 0;
|
154 |
+
padding: 0;
|
155 |
+
display: flex;
|
156 |
+
justify-content: center;
|
157 |
+
align-items: center;
|
158 |
+
}
|
159 |
+
|
160 |
+
.nav-bar li {
|
161 |
+
margin: 0 15px;
|
162 |
+
}
|
163 |
+
|
164 |
+
.nav-bar a {
|
165 |
+
text-decoration: none;
|
166 |
+
color: var(--text-color);
|
167 |
+
font-weight: 600;
|
168 |
+
transition: all 0.3s ease;
|
169 |
+
display: flex;
|
170 |
+
align-items: center;
|
171 |
+
}
|
172 |
+
|
173 |
+
.nav-bar a img {
|
174 |
+
height: 24px;
|
175 |
+
margin-right: 5px;
|
176 |
+
}
|
177 |
+
|
178 |
+
|
179 |
+
|
180 |
+
.nav-bar a:hover {
|
181 |
+
color: var(--primary-color);
|
182 |
+
}
|
183 |
+
|
184 |
+
.hero {
|
185 |
+
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
186 |
+
padding: 25px 0;
|
187 |
+
text-align: center;
|
188 |
+
color: #fff;
|
189 |
+
position: relative;
|
190 |
+
overflow: hidden;
|
191 |
+
}
|
192 |
+
|
193 |
+
.hero::before {
|
194 |
+
content: '';
|
195 |
+
position: absolute;
|
196 |
+
top: 0;
|
197 |
+
left: 0;
|
198 |
+
right: 0;
|
199 |
+
bottom: 0;
|
200 |
+
background: url('../static/school.avif') no-repeat center center;
|
201 |
+
background-size: cover;
|
202 |
+
opacity: 0.1;
|
203 |
+
z-index: 0;
|
204 |
+
}
|
205 |
+
|
206 |
+
.hero-content {
|
207 |
+
position: relative;
|
208 |
+
z-index: 1;
|
209 |
+
}
|
210 |
+
|
211 |
+
.hero h1 {
|
212 |
+
font-size: 48px;
|
213 |
+
margin-bottom: 20px;
|
214 |
+
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
215 |
+
}
|
216 |
+
|
217 |
+
.hero p {
|
218 |
+
font-size: 20px;
|
219 |
+
margin-bottom: 30px;
|
220 |
+
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
|
221 |
+
}
|
222 |
+
|
223 |
+
.btn {
|
224 |
+
display: inline-block;
|
225 |
+
background-color: var(--accent-color);
|
226 |
+
color: #fff;
|
227 |
+
padding: 12px 30px;
|
228 |
+
text-decoration: none;
|
229 |
+
font-weight: 600;
|
230 |
+
border-radius: 30px;
|
231 |
+
transition: all 0.3s ease;
|
232 |
+
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
233 |
+
}
|
234 |
+
|
235 |
+
.btn:hover {
|
236 |
+
background-color: #ff4757;
|
237 |
+
transform: translateY(-3px);
|
238 |
+
}
|
239 |
+
|
240 |
+
.categories{
|
241 |
+
padding: 60px 0;
|
242 |
+
background-color: #fff;
|
243 |
+
margin: 40px 0;
|
244 |
+
border-radius: 10px;
|
245 |
+
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
246 |
+
}
|
247 |
+
.features {
|
248 |
+
position: relative; /* Required for positioning the overlay */
|
249 |
+
padding: 60px 0;
|
250 |
+
background-color: #fff; /* Background color for fallback */
|
251 |
+
margin: 40px 0;
|
252 |
+
border-radius: 10px;
|
253 |
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
|
254 |
+
background-image: url(https://st.depositphotos.com/1169502/2273/v/950/depositphotos_22739399-stock-illustration-abstract-purple-wave-background.jpg);
|
255 |
+
background-size: cover;
|
256 |
+
background-position: center;
|
257 |
+
background-repeat: no-repeat;
|
258 |
+
}
|
259 |
+
|
260 |
+
.features::before {
|
261 |
+
content: '';
|
262 |
+
position: absolute;
|
263 |
+
top: 0;
|
264 |
+
left: 0;
|
265 |
+
width: 100%;
|
266 |
+
height: 100%;
|
267 |
+
background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white overlay */
|
268 |
+
border-radius: 10px; /* Match the container's border-radius */
|
269 |
+
z-index: 1; /* Ensure the overlay is above the image */
|
270 |
+
}
|
271 |
+
|
272 |
+
.features > * {
|
273 |
+
position: relative;
|
274 |
+
z-index: 2; /* Ensure content is above the overlay */
|
275 |
+
}
|
276 |
+
|
277 |
+
|
278 |
+
.learning-section {
|
279 |
+
padding: 60px 0;
|
280 |
+
background-color: #fff;
|
281 |
+
margin: 40px 0;
|
282 |
+
border-radius: 10px;
|
283 |
+
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
284 |
+
background-image: url(../static/course.jpg);
|
285 |
+
background-size: cover;
|
286 |
+
background-position: center;
|
287 |
+
background-repeat: no-repeat;
|
288 |
+
}
|
289 |
+
|
290 |
+
.learning-item {
|
291 |
+
display: block;
|
292 |
+
overflow: hidden;
|
293 |
+
border: 1px solid #ddd; /* Optional: Adds a border to the container */
|
294 |
+
border-radius: 8px; /* Optional: Adds rounded corners */
|
295 |
+
margin-bottom: 20px; /* Adjust spacing between items */
|
296 |
+
}
|
297 |
+
|
298 |
+
.learning-item img {
|
299 |
+
width: 100%;
|
300 |
+
height: auto;
|
301 |
+
display: block;
|
302 |
+
object-fit: cover;
|
303 |
+
}
|
304 |
+
|
305 |
+
.learning-content {
|
306 |
+
padding: 10px;
|
307 |
+
background-color: #f9f9f9;
|
308 |
+
}
|
309 |
+
|
310 |
+
.section-title {
|
311 |
+
font-size: 32px;
|
312 |
+
text-align: center;
|
313 |
+
margin-bottom: 40px;
|
314 |
+
color: var(--primary-color);
|
315 |
+
}
|
316 |
+
|
317 |
+
.category-list, .feature-grid, .learning-grid {
|
318 |
+
display: grid;
|
319 |
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
320 |
+
gap: 30px;
|
321 |
+
}
|
322 |
+
|
323 |
+
.category-item, .feature-card, .learning-item {
|
324 |
+
background-color: #fff;
|
325 |
+
border-radius: 10px;
|
326 |
+
padding: 20px;
|
327 |
+
text-align: center;
|
328 |
+
transition: all 0.3s ease;
|
329 |
+
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
330 |
+
}
|
331 |
+
|
332 |
+
.category-item:hover, .feature-card:hover, .learning-item:hover {
|
333 |
+
transform: translateY(-10px);
|
334 |
+
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
|
335 |
+
}
|
336 |
+
|
337 |
+
.feature-grid {
|
338 |
+
display: grid;
|
339 |
+
grid-template-columns: repeat(3, 1fr);
|
340 |
+
grid-gap: 20px;
|
341 |
+
}
|
342 |
+
|
343 |
+
.feature-card {
|
344 |
+
background: #fff;
|
345 |
+
border: 1px solid #ddd;
|
346 |
+
border-radius: 8px;
|
347 |
+
padding: 20px;
|
348 |
+
text-align: center;
|
349 |
+
}
|
350 |
+
|
351 |
+
.feature-card img {
|
352 |
+
max-width: 100%;
|
353 |
+
border-radius: 8px;
|
354 |
+
margin-bottom: 15px;
|
355 |
+
}
|
356 |
+
|
357 |
+
.feature-card h3 {
|
358 |
+
margin: 10px 0;
|
359 |
+
}
|
360 |
+
|
361 |
+
.feature-card p {
|
362 |
+
margin: 10px 0 20px;
|
363 |
+
}
|
364 |
+
|
365 |
+
.feature-card .btn {
|
366 |
+
display: inline-block;
|
367 |
+
padding: 10px 20px;
|
368 |
+
background-color: #007BFF;
|
369 |
+
color: #fff;
|
370 |
+
text-decoration: none;
|
371 |
+
border-radius: 4px;
|
372 |
+
}
|
373 |
+
|
374 |
+
@media (max-width: 768px) {
|
375 |
+
.feature-grid {
|
376 |
+
grid-template-columns: 1fr;
|
377 |
+
}
|
378 |
+
}
|
379 |
+
|
380 |
+
|
381 |
+
footer {
|
382 |
+
background-color: #333;
|
383 |
+
color: #fff;
|
384 |
+
padding: 40px 0;
|
385 |
+
}
|
386 |
+
|
387 |
+
.footer-content {
|
388 |
+
display: flex;
|
389 |
+
justify-content: space-between;
|
390 |
+
flex-wrap: wrap;
|
391 |
+
}
|
392 |
+
|
393 |
+
.footer-section {
|
394 |
+
flex: 1;
|
395 |
+
margin-right: 20px;
|
396 |
+
}
|
397 |
+
|
398 |
+
.footer-section h4 {
|
399 |
+
font-size: 18px;
|
400 |
+
margin-bottom: 15px;
|
401 |
+
color: var(--accent-color);
|
402 |
+
}
|
403 |
+
|
404 |
+
.footer-section ul {
|
405 |
+
list-style: none;
|
406 |
+
padding: 0;
|
407 |
+
}
|
408 |
+
|
409 |
+
.footer-section ul li {
|
410 |
+
margin-bottom: 10px;
|
411 |
+
}
|
412 |
+
|
413 |
+
.footer-section ul li a {
|
414 |
+
color: #ccc;
|
415 |
+
text-decoration: none;
|
416 |
+
transition: color 0.3s ease;
|
417 |
+
}
|
418 |
+
|
419 |
+
.footer-section ul li a:hover {
|
420 |
+
color: #fff;
|
421 |
+
}
|
422 |
+
|
423 |
+
.social-icons {
|
424 |
+
display: flex;
|
425 |
+
gap: 15px;
|
426 |
+
}
|
427 |
+
|
428 |
+
.social-icon {
|
429 |
+
color: #fff;
|
430 |
+
font-size: 24px;
|
431 |
+
transition: all 0.3s ease;
|
432 |
+
}
|
433 |
+
|
434 |
+
.social-icon:hover {
|
435 |
+
transform: scale(1.2);
|
436 |
+
color: var(--accent-color);
|
437 |
+
}
|
438 |
+
|
439 |
+
.copyright {
|
440 |
+
margin-top: 30px;
|
441 |
+
text-align: center;
|
442 |
+
color: #ccc;
|
443 |
+
}
|
444 |
+
|
445 |
+
/* Animations */
|
446 |
+
@keyframes fadeIn {
|
447 |
+
from { opacity: 0; }
|
448 |
+
to { opacity: 1; }
|
449 |
+
}
|
450 |
+
|
451 |
+
@keyframes slideIn {
|
452 |
+
from { transform: translateY(50px); opacity: 0; }
|
453 |
+
to { transform: translateY(0); opacity: 1; }
|
454 |
+
}
|
455 |
+
|
456 |
+
.fade-in {
|
457 |
+
animation: fadeIn 1s ease-out;
|
458 |
+
}
|
459 |
+
|
460 |
+
.slide-in {
|
461 |
+
animation: slideIn 0.5s ease-out;
|
462 |
+
}
|
463 |
+
.performance-graph {
|
464 |
+
margin-top: 20px;
|
465 |
+
padding: 15px;
|
466 |
+
background-color: #f0f4f8;
|
467 |
+
border-radius: 10px;
|
468 |
+
}
|
469 |
+
|
470 |
+
#performanceChart {
|
471 |
+
width: 100%;
|
472 |
+
height: 300px;
|
473 |
+
}
|
474 |
+
/* Existing styles... */
|
475 |
+
|
476 |
+
/* Profile Sidebar Styles */
|
477 |
+
.profile-sidebar {
|
478 |
+
position: fixed;
|
479 |
+
top: 0;
|
480 |
+
right: -100%;
|
481 |
+
width: 100%;
|
482 |
+
height: 100%;
|
483 |
+
max-width: 400px;
|
484 |
+
background-color: #ffffff;
|
485 |
+
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
|
486 |
+
transition: right 0.3s ease-out;
|
487 |
+
overflow-y: auto;
|
488 |
+
z-index: 1000;
|
489 |
+
padding: 20px;
|
490 |
+
}
|
491 |
+
|
492 |
+
.profile-sidebar.active {
|
493 |
+
right: 0;
|
494 |
+
}
|
495 |
+
|
496 |
+
@media (min-width: 768px) {
|
497 |
+
.profile-sidebar {
|
498 |
+
width: 50%;
|
499 |
+
}
|
500 |
+
}
|
501 |
+
|
502 |
+
.close-button {
|
503 |
+
position: absolute;
|
504 |
+
top: 10px;
|
505 |
+
right: 10px;
|
506 |
+
font-size: 24px;
|
507 |
+
background: none;
|
508 |
+
border: none;
|
509 |
+
cursor: pointer;
|
510 |
+
}
|
511 |
+
|
512 |
+
.profile-header {
|
513 |
+
text-align: center;
|
514 |
+
margin-bottom: 20px;
|
515 |
+
}
|
516 |
+
|
517 |
+
.avatar {
|
518 |
+
width: 150px;
|
519 |
+
height: 150px;
|
520 |
+
border-radius: 50%;
|
521 |
+
object-fit: cover;
|
522 |
+
margin-bottom: 10px;
|
523 |
+
}
|
524 |
+
|
525 |
+
.profile-info {
|
526 |
+
background-color: #f0f4f8;
|
527 |
+
padding: 15px;
|
528 |
+
border-radius: 10px;
|
529 |
+
margin-bottom: 20px;
|
530 |
+
}
|
531 |
+
|
532 |
+
.subjects ul {
|
533 |
+
list-style-type: none;
|
534 |
+
padding-left: 0;
|
535 |
+
}
|
536 |
+
|
537 |
+
.subjects li {
|
538 |
+
background-color: #e6f3ff;
|
539 |
+
margin-bottom: 5px;
|
540 |
+
padding: 5px 10px;
|
541 |
+
border-radius: 5px;
|
542 |
+
}
|
543 |
+
|
544 |
+
.performance-graph {
|
545 |
+
margin-top: 20px;
|
546 |
+
}
|
547 |
+
|
548 |
+
#performanceChart {
|
549 |
+
width: 100%;
|
550 |
+
height: 200px;
|
551 |
+
}
|
552 |
+
|
553 |
+
/* Ensure the profile icon is clickable */
|
554 |
+
.profile-icon {
|
555 |
+
cursor: pointer;
|
556 |
+
}
|
557 |
+
.hero-content {
|
558 |
+
display: flex;
|
559 |
+
flex-direction: column;
|
560 |
+
align-items: flex-start;
|
561 |
+
text-align: left;
|
562 |
+
}
|
563 |
+
|
564 |
+
.welcome-message {
|
565 |
+
align-self: flex-start;
|
566 |
+
margin-bottom: 20px;
|
567 |
+
}
|
568 |
+
|
569 |
+
.welcome-message h2 {
|
570 |
+
font-size: 28px;
|
571 |
+
margin-bottom: 5px;
|
572 |
+
}
|
573 |
+
|
574 |
+
.welcome-message p {
|
575 |
+
font-size: 16px;
|
576 |
+
}
|
577 |
+
|
578 |
+
.hero h1 {
|
579 |
+
font-size: 40px;
|
580 |
+
margin-bottom: 15px;
|
581 |
+
}
|
582 |
+
|
583 |
+
.hero > p {
|
584 |
+
font-size: 18px;
|
585 |
+
margin-bottom: 25px;
|
586 |
+
}
|
587 |
+
.hero-content {
|
588 |
+
display: flex;
|
589 |
+
flex-direction: column;
|
590 |
+
align-items: center;
|
591 |
+
text-align: left;
|
592 |
+
}
|
593 |
+
|
594 |
+
.welcome-message {
|
595 |
+
margin-bottom: 20px;
|
596 |
+
}
|
597 |
+
|
598 |
+
.text-and-image {
|
599 |
+
display: flex;
|
600 |
+
align-items: center;
|
601 |
+
justify-content: space-between;
|
602 |
+
width: 100%;
|
603 |
+
}
|
604 |
+
|
605 |
+
.text-section {
|
606 |
+
flex: 1;
|
607 |
+
margin-right: 20px;
|
608 |
+
}
|
609 |
+
|
610 |
+
.image-section {
|
611 |
+
flex: 1;
|
612 |
+
max-width: 400px; /* Adjust the max width as needed */
|
613 |
+
}
|
614 |
+
|
615 |
+
.image-section img {
|
616 |
+
width: 100%;
|
617 |
+
height: auto;
|
618 |
+
border-radius: 10px;
|
619 |
+
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
620 |
+
}
|
621 |
+
|
622 |
+
</style>
|
623 |
+
</head>
|
624 |
+
<body>
|
625 |
+
<header>
|
626 |
+
<div class="container">
|
627 |
+
<div class="header-content">
|
628 |
+
<div class="logo">
|
629 |
+
<img src="../static/smart-learn.jpeg" alt="">
|
630 |
+
SmartLearn
|
631 |
+
</div>
|
632 |
+
<div class="search-bar">
|
633 |
+
<input type="text" placeholder="Search for anything">
|
634 |
+
<div class="ai-tools">
|
635 |
+
<i class="fas fa-camera" title="Photo Question Answering"></i>
|
636 |
+
<i class="fas fa-brain" title="AI Tutor"></i>
|
637 |
+
<i class="fas fa-robot" title="AI Assistant"></i>
|
638 |
+
</div>
|
639 |
+
</div>
|
640 |
+
<div class="user-actions">
|
641 |
+
<a href="{{ url_for('student_reward_points') }}" class="points-display">1500 pts</a>
|
642 |
+
<div class="profile-icon" id="profile-icon">A</div>
|
643 |
+
</div>
|
644 |
+
</div>
|
645 |
+
</div>
|
646 |
+
</header>
|
647 |
+
<nav class="nav-bar">
|
648 |
+
<ul>
|
649 |
+
<li><a href="{{ url_for('student') }}"><img src="https://cdn-icons-png.flaticon.com/512/1946/1946488.png" alt="Home">Home</a></li>
|
650 |
+
<li><a href="{{ url_for('student') }}#ai-powered-tools"><img src="https://www.kalupurbank.com/wp-content/uploads/2023/02/robot-chatbot-icon-sign-free-vector.webp" alt="Home">Ai Tools</a></li>
|
651 |
+
<li><a href="{{ url_for('homework') }}"><img src="https://cdn-icons-png.flaticon.com/512/1828/1828919.png" alt="Homework">Homework</a></li>
|
652 |
+
<li><a href="{{ url_for('student_courses') }}"><img src="https://cdn-icons-png.flaticon.com/512/1048/1048953.png" alt="Courses">Courses</a></li>
|
653 |
+
<li><a href="{{ url_for('speak') }}"><img src="https://cdn-icons-png.flaticon.com/512/4712/4712026.png" alt="Speak With AI">Speak With AI</a></li>
|
654 |
+
<li><a href="{{ url_for('summarise_video') }}"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/1280px-YouTube_full-color_icon_%282017%29.svg.png" alt="Ssummarise_video">summarise_video</a></li>
|
655 |
+
</ul>
|
656 |
+
</nav>
|
657 |
+
|
658 |
+
|
659 |
+
|
660 |
+
<section class="hero">
|
661 |
+
<div class="container">
|
662 |
+
<div class="hero-content fade-in">
|
663 |
+
<div class="welcome-message">
|
664 |
+
<h2>Welcome, {{student.name}}</h2>
|
665 |
+
<p>Ready to continue your learning journey?</p>
|
666 |
+
</div>
|
667 |
+
<div class="text-and-image">
|
668 |
+
<div class="text-section">
|
669 |
+
<h1>Revolutionize Your Learning with AI</h1>
|
670 |
+
<p>Unlock your potential with our cutting-edge AI education platform</p>
|
671 |
+
<a href="{{ url_for('student') }}#ai-powered-tools" class="btn">Start Learning Now</a>
|
672 |
+
</div>
|
673 |
+
<div class="image-section">
|
674 |
+
<img src="https://i.pinimg.com/736x/64/bf/d1/64bfd1fa2cfdbf0288a96628395d2f9f.jpg" alt="Welcome Image">
|
675 |
+
</div>
|
676 |
+
</div>
|
677 |
+
</div>
|
678 |
+
</div>
|
679 |
+
</section>
|
680 |
+
|
681 |
+
|
682 |
+
<section class="categories">
|
683 |
+
<div class="container">
|
684 |
+
<h2>Top Categories</h2>
|
685 |
+
<div class="category-list">
|
686 |
+
<div class="category-item">Math</div>
|
687 |
+
<div class="category-item">Science</div>
|
688 |
+
<div class="category-item">Language Arts</div>
|
689 |
+
<div class="category-item">History</div>
|
690 |
+
<div class="category-item">Computer Science</div>
|
691 |
+
<div class="category-item">Foreign Languages</div>
|
692 |
+
<div class="category-item">Test Prep</div>
|
693 |
+
<div class="category-item">Arts & Music</div>
|
694 |
+
</div>
|
695 |
+
</div>
|
696 |
+
</section>
|
697 |
+
|
698 |
+
<section class="learning-section">
|
699 |
+
<div class="container">
|
700 |
+
<div class="section-header">
|
701 |
+
<h2>Continue your learning journey</h2>
|
702 |
+
<a href="#" class="my-learning">My learning</a>
|
703 |
+
</div>
|
704 |
+
<div class="learning-grid">
|
705 |
+
|
706 |
+
<a href="{{ url_for('student_courses') }}" class="learning-item">
|
707 |
+
<img src="https://i4.ytimg.com/vi/aircAruvnKk/sddefault.jpg" alt="Python and Django">
|
708 |
+
<div class="learning-content">
|
709 |
+
<div class="learning-title">
|
710 |
+
<span class="icon-play"></span>
|
711 |
+
Python Neural network
|
712 |
+
</div>
|
713 |
+
<div class="learning-subtitle">48. Advanced Models</div>
|
714 |
+
<div class="learning-meta">Lecture • 15min</div>
|
715 |
+
</div>
|
716 |
+
</a>
|
717 |
+
<a href="{{ url_for('homework') }}" class="learning-item">
|
718 |
+
<img src="https://cdn.analyticsvidhya.com/wp-content/uploads/2024/01/cover-page--scaled.jpg" alt="AI Quiz">
|
719 |
+
<div class="learning-content">
|
720 |
+
<div class="learning-title">
|
721 |
+
<span class="icon-quiz"></span>
|
722 |
+
AI-Generated Quiz
|
723 |
+
</div>
|
724 |
+
<div class="learning-subtitle">Test Your Knowledge</div>
|
725 |
+
<div class="learning-meta">Quiz • 10 questions</div>
|
726 |
+
</div>
|
727 |
+
</a>
|
728 |
+
<a href="{{ url_for('student_courses') }}" class="learning-item">
|
729 |
+
<img src="https://www.fsm.ac.in/blog/wp-content/uploads/2022/07/FUqHEVVUsAAbZB0-1024x580.jpg" alt="Data Science">
|
730 |
+
<div class="learning-content">
|
731 |
+
<div class="learning-title">
|
732 |
+
<span class="icon-play"></span>
|
733 |
+
Introduction to Data Science
|
734 |
+
</div>
|
735 |
+
<div class="learning-subtitle">2. Data Visualization Techniques</div>
|
736 |
+
<div class="learning-meta">Lecture • 20min</div>
|
737 |
+
</div>
|
738 |
+
</a>
|
739 |
+
</div>
|
740 |
+
</div>
|
741 |
+
</section>
|
742 |
+
|
743 |
+
<section id="ai-powered-tools" class="features">
|
744 |
+
<div class="container">
|
745 |
+
<h2>AI-Powered Learning Tools</h2>
|
746 |
+
<div class="feature-grid">
|
747 |
+
<div class="feature-card">
|
748 |
+
<img src="data:image/png;base64,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" alt="Quiz Generation">
|
749 |
+
<h3>Quiz Generation</h3>
|
750 |
+
<p>Create custom quizzes on any topic</p>
|
751 |
+
<a href="/student_quiz" class="btn">Generate Quiz</a>
|
752 |
+
</div>
|
753 |
+
|
754 |
+
<div class="feature-card">
|
755 |
+
<img src="https://cdn-icons-png.freepik.com/256/4295/4295914.png?semt=ais_hybrid" alt="Step-by-Step Explanations">
|
756 |
+
<h3>Step-by-Step Explanations</h3>
|
757 |
+
<p>Detailed solutions for complex problems</p>
|
758 |
+
<a href="/student_stepexplanation" class="btn">Get Explanation</a>
|
759 |
+
</div>
|
760 |
+
<div class="feature-card">
|
761 |
+
<img src="https://evelynlearning.b-cdn.net/wp-content/uploads/2023/09/ai-8160920-2-1024x575.jpg" alt="AI Tutor">
|
762 |
+
<h3>AI Tutor</h3>
|
763 |
+
<p>One-on-one tutoring with AI</p>
|
764 |
+
<a href="/student_aitutor" class="btn">Start Session</a>
|
765 |
+
</div>
|
766 |
+
<div class="feature-card">
|
767 |
+
<img src="https://www.intelligent.com/wp-content/uploads/2013/06/chapter_pic02-1.jpg" alt="Personalized Study Plans">
|
768 |
+
<h3>Personalized Study Plans</h3>
|
769 |
+
<p>Tailored learning paths for your goals</p>
|
770 |
+
<a href="/student_studyplans" class="btn">Create Plan</a>
|
771 |
+
</div>
|
772 |
+
<div class="feature-card">
|
773 |
+
<img src="https://project-idea.org/wp-content/uploads/2021/06/ProjectIdea_PrimaryLogo_DarkText.svg" alt="Project Idea Generator">
|
774 |
+
<h3>Project Idea Generator</h3>
|
775 |
+
<p>Get creative project suggestions based on your interests</p>
|
776 |
+
<a href="/student_projectideas" class="btn">Generate Ideas</a>
|
777 |
+
</div>
|
778 |
+
<div class="feature-card">
|
779 |
+
<img src="https://www.pdfgear.com/how-to/img/ai-that-read-pdf-and-answers-questions-1.png" alt="PDF Questions & Answers">
|
780 |
+
<h3>PDF Questions & Answers</h3>
|
781 |
+
<p>Upload pdf solve doubts & questions</p>
|
782 |
+
<a href="/student_pdfqa" class="btn">Upload PDF</a>
|
783 |
+
</div>
|
784 |
+
</div>
|
785 |
+
</div>
|
786 |
+
</section>
|
787 |
+
|
788 |
+
|
789 |
+
<div id="profile-sidebar" class="profile-sidebar">
|
790 |
+
<button id="close-profile" class="close-button">×</button>
|
791 |
+
|
792 |
+
<div class="profile-header">
|
793 |
+
<img src="https://via.placeholder.com/150" alt="Student Avatar" class="avatar">
|
794 |
+
<h2>{{ student.name }}</h2>
|
795 |
+
<p>Student ID: {{ student.id }}</p>
|
796 |
+
</div>
|
797 |
+
|
798 |
+
<div class="profile-info">
|
799 |
+
<p><strong>School:</strong> {{ student.school }}</p>
|
800 |
+
<p><strong>Date of Birth:</strong> {{ student.dob }}</p>
|
801 |
+
<p><strong>Email:</strong> {{ student.email }}</p>
|
802 |
+
</div>
|
803 |
+
|
804 |
+
<div class="subjects">
|
805 |
+
<h3>Interested Subjects</h3>
|
806 |
+
<ul>
|
807 |
+
{% for subject in student.subjects_interested %}
|
808 |
+
<li>{{ subject }}</li>
|
809 |
+
{% endfor %}
|
810 |
+
</ul>
|
811 |
+
|
812 |
+
<h3>Subjects Needing Improvement</h3>
|
813 |
+
<ul>
|
814 |
+
{% for subject in student.subjects_needing_improvement %}
|
815 |
+
<li>{{ subject }}</li>
|
816 |
+
{% endfor %}
|
817 |
+
</ul>
|
818 |
+
</div>
|
819 |
+
|
820 |
+
<div class="performance-graph">
|
821 |
+
<h3>Performance Analytics</h3>
|
822 |
+
<canvas id="performanceChart"></canvas>
|
823 |
+
</div>
|
824 |
+
<a href="{{ url_for('index') }}" style="color: #ff4757; text-align: center;" ><h2>Log out</h2></a>
|
825 |
+
</div>
|
826 |
+
<footer>
|
827 |
+
<div class="container">
|
828 |
+
<div class="footer-content">
|
829 |
+
<div class="footer-section">
|
830 |
+
<h4>About SmartLearn</h4>
|
831 |
+
<ul>
|
832 |
+
<li><a href="#">About Us</a></li>
|
833 |
+
<li><a href="#">Careers</a></li>
|
834 |
+
<li><a href="#">Press</a></li>
|
835 |
+
<li><a href="#">Blog</a></li>
|
836 |
+
</ul>
|
837 |
+
</div>
|
838 |
+
<div class="footer-section">
|
839 |
+
<h4>Support</h4>
|
840 |
+
<ul>
|
841 |
+
<li><a href="#">Help Center</a></li>
|
842 |
+
<li><a href="#">Contact Us</a></li>
|
843 |
+
<li><a href="#">Privacy Policy</a></li>
|
844 |
+
<li><a href="#">Terms of Service</a></li>
|
845 |
+
</ul>
|
846 |
+
</div>
|
847 |
+
<div class="footer-section">
|
848 |
+
<h4>Connect with Us</h4>
|
849 |
+
<div class="social-icons">
|
850 |
+
<a href="#" class="social-icon">Facebook</a>
|
851 |
+
<a href="#" class="social-icon">Twitter</a>
|
852 |
+
<a href="#" class="social-icon">LinkedIn</a>
|
853 |
+
<a href="#" class="social-icon">Instagram</a>
|
854 |
+
</div>
|
855 |
+
</div>
|
856 |
+
</div>
|
857 |
+
<div class="copyright">
|
858 |
+
<p>© 2024 SmartLearn. All rights reserved.</p>
|
859 |
+
</div>
|
860 |
+
</div>
|
861 |
+
</footer>
|
862 |
+
|
863 |
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
864 |
+
<script src="static/profile.js"></script>
|
865 |
+
<script>
|
866 |
+
document.addEventListener('DOMContentLoaded', function() {
|
867 |
+
const profileIcon = document.getElementById('profile-icon');
|
868 |
+
const profileSidebar = document.getElementById('profile-sidebar');
|
869 |
+
const closeProfile = document.getElementById('close-profile');
|
870 |
+
|
871 |
+
profileIcon.addEventListener('click', function() {
|
872 |
+
profileSidebar.classList.add('active');
|
873 |
+
});
|
874 |
+
|
875 |
+
closeProfile.addEventListener('click', function() {
|
876 |
+
profileSidebar.classList.remove('active');
|
877 |
+
});
|
878 |
+
});
|
879 |
+
</script>
|
880 |
+
<script>
|
881 |
+
document.addEventListener('DOMContentLoaded', function() {
|
882 |
+
const profileIcon = document.getElementById('profile-icon');
|
883 |
+
const profileSidebar = document.getElementById('profile-sidebar');
|
884 |
+
const closeProfile = document.getElementById('close-profile');
|
885 |
+
|
886 |
+
profileIcon.addEventListener('click', function() {
|
887 |
+
profileSidebar.classList.add('active');
|
888 |
+
renderPerformanceChart();
|
889 |
+
});
|
890 |
+
|
891 |
+
closeProfile.addEventListener('click', function() {
|
892 |
+
profileSidebar.classList.remove('active');
|
893 |
+
});
|
894 |
+
|
895 |
+
function renderPerformanceChart() {
|
896 |
+
const ctx = document.getElementById('performanceChart').getContext('2d');
|
897 |
+
|
898 |
+
// Sample data
|
899 |
+
const data = {
|
900 |
+
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
|
901 |
+
datasets: [{
|
902 |
+
label: 'Performance Score',
|
903 |
+
data: [65, 72, 68, 80, 75, 85],
|
904 |
+
fill: false,
|
905 |
+
borderColor: 'rgb(75, 192, 192)',
|
906 |
+
tension: 0.1,
|
907 |
+
pointBackgroundColor: 'rgb(75, 192, 192)',
|
908 |
+
pointBorderColor: '#fff',
|
909 |
+
pointHoverBackgroundColor: '#fff',
|
910 |
+
pointHoverBorderColor: 'rgb(75, 192, 192)'
|
911 |
+
}]
|
912 |
+
};
|
913 |
+
|
914 |
+
const config = {
|
915 |
+
type: 'line',
|
916 |
+
data: data,
|
917 |
+
options: {
|
918 |
+
responsive: true,
|
919 |
+
plugins: {
|
920 |
+
title: {
|
921 |
+
display: true,
|
922 |
+
text: 'Weekly Performance'
|
923 |
+
},
|
924 |
+
legend: {
|
925 |
+
position: 'bottom',
|
926 |
+
}
|
927 |
+
},
|
928 |
+
scales: {
|
929 |
+
y: {
|
930 |
+
beginAtZero: true,
|
931 |
+
max: 100,
|
932 |
+
title: {
|
933 |
+
display: true,
|
934 |
+
text: 'Score'
|
935 |
+
}
|
936 |
+
},
|
937 |
+
x: {
|
938 |
+
title: {
|
939 |
+
display: true,
|
940 |
+
text: 'Week'
|
941 |
+
}
|
942 |
+
}
|
943 |
+
}
|
944 |
+
}
|
945 |
+
};
|
946 |
+
|
947 |
+
new Chart(ctx, config);
|
948 |
+
}
|
949 |
+
});
|
950 |
+
</script>
|
951 |
+
</body>
|
952 |
+
</html>
|
templates/student_aitutor.html
ADDED
@@ -0,0 +1,647 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>SmartLearn - AI Tutor</title>
|
7 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
8 |
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
9 |
+
<style>
|
10 |
+
body {
|
11 |
+
font-family: 'Roboto', sans-serif;
|
12 |
+
margin: 0;
|
13 |
+
padding: 0;
|
14 |
+
background-color: #f0f2f5;
|
15 |
+
color: #333;
|
16 |
+
}
|
17 |
+
.back-button {
|
18 |
+
background-color: #3498db;
|
19 |
+
color: white;
|
20 |
+
border: none;
|
21 |
+
padding: 10px 15px;
|
22 |
+
border-radius: 5px;
|
23 |
+
cursor: pointer;
|
24 |
+
transition: background-color 0.3s ease;
|
25 |
+
position: absolute;
|
26 |
+
top: 20px;
|
27 |
+
left: 20px;
|
28 |
+
z-index: 10;
|
29 |
+
}
|
30 |
+
.back-button:hover {
|
31 |
+
background-color: #2980b9;
|
32 |
+
}
|
33 |
+
h1 {
|
34 |
+
text-align: center;
|
35 |
+
color: #3498db;
|
36 |
+
margin: 20px 0;
|
37 |
+
}
|
38 |
+
.chat-container {
|
39 |
+
max-width: 800px;
|
40 |
+
margin: 0 auto;
|
41 |
+
padding: 20px;
|
42 |
+
background-color: white;
|
43 |
+
border-radius: 10px;
|
44 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
45 |
+
overflow: hidden;
|
46 |
+
position: relative;
|
47 |
+
z-index: 5;
|
48 |
+
}
|
49 |
+
.chat-messages {
|
50 |
+
height: 400px;
|
51 |
+
overflow-y: auto;
|
52 |
+
padding: 20px;
|
53 |
+
box-sizing: border-box;
|
54 |
+
display: flex;
|
55 |
+
flex-direction: column;
|
56 |
+
}
|
57 |
+
.chat-input {
|
58 |
+
display: flex;
|
59 |
+
align-items: center;
|
60 |
+
padding: 10px;
|
61 |
+
background-color: #ecf0f1;
|
62 |
+
box-sizing: border-box;
|
63 |
+
}
|
64 |
+
.chat-input input {
|
65 |
+
flex-grow: 1;
|
66 |
+
min-width: 0;
|
67 |
+
padding: 10px;
|
68 |
+
border: 1px solid #ccc;
|
69 |
+
border-radius: 20px;
|
70 |
+
font-size: 16px;
|
71 |
+
box-sizing: border-box;
|
72 |
+
overflow-wrap: break-word;
|
73 |
+
}
|
74 |
+
.chat-input button {
|
75 |
+
margin-left: 10px;
|
76 |
+
padding: 10px 20px;
|
77 |
+
background-color: #3498db;
|
78 |
+
color: white;
|
79 |
+
border: none;
|
80 |
+
border-radius: 20px;
|
81 |
+
cursor: pointer;
|
82 |
+
transition: background-color 0.3s ease;
|
83 |
+
}
|
84 |
+
.chat-input button:hover {
|
85 |
+
background-color: #2980b9;
|
86 |
+
}
|
87 |
+
.image-upload {
|
88 |
+
margin-right: 10px;
|
89 |
+
}
|
90 |
+
.image-upload input[type="file"] {
|
91 |
+
display: none;
|
92 |
+
}
|
93 |
+
.image-upload label {
|
94 |
+
cursor: pointer;
|
95 |
+
font-size: 24px;
|
96 |
+
color: #3498db;
|
97 |
+
transition: color 0.3s ease;
|
98 |
+
}
|
99 |
+
.image-upload label:hover {
|
100 |
+
color: #2980b9;
|
101 |
+
}
|
102 |
+
.message {
|
103 |
+
display: block;
|
104 |
+
max-width: 80%;
|
105 |
+
margin-bottom: 15px;
|
106 |
+
padding: 10px 15px;
|
107 |
+
border-radius: 20px;
|
108 |
+
box-sizing: border-box;
|
109 |
+
word-wrap: break-word;
|
110 |
+
position: relative;
|
111 |
+
clear: both;
|
112 |
+
}
|
113 |
+
.user-message {
|
114 |
+
background-color: #3498db;
|
115 |
+
color: white;
|
116 |
+
float: right;
|
117 |
+
}
|
118 |
+
.ai-message {
|
119 |
+
background-color: #7b989e;
|
120 |
+
color: #333;
|
121 |
+
float: left;
|
122 |
+
padding-bottom: 30px; /* Space for translate option */
|
123 |
+
}
|
124 |
+
.message img {
|
125 |
+
max-width: 100%;
|
126 |
+
border-radius: 10px;
|
127 |
+
margin-top: 10px;
|
128 |
+
}
|
129 |
+
.background-image {
|
130 |
+
position: fixed;
|
131 |
+
top: 0;
|
132 |
+
left: 0;
|
133 |
+
width: 100%;
|
134 |
+
height: 100%;
|
135 |
+
background-image: url('https://hashagile.com/wp-content/uploads/2022/02/ils_13.svg');
|
136 |
+
background-size: cover;
|
137 |
+
background-position: center;
|
138 |
+
opacity: 0.1;
|
139 |
+
z-index: -1;
|
140 |
+
}
|
141 |
+
.features {
|
142 |
+
display: flex;
|
143 |
+
justify-content: center;
|
144 |
+
margin-bottom: 20px;
|
145 |
+
}
|
146 |
+
.feature-icon {
|
147 |
+
font-size: 24px;
|
148 |
+
margin: 0 15px;
|
149 |
+
color: #3498db;
|
150 |
+
cursor: pointer;
|
151 |
+
transition: transform 0.3s ease, color 0.3s ease;
|
152 |
+
}
|
153 |
+
.feature-icon:hover {
|
154 |
+
transform: scale(1.2);
|
155 |
+
color: #2980b9;
|
156 |
+
}
|
157 |
+
.typing-indicator {
|
158 |
+
display: flex;
|
159 |
+
padding: 10px;
|
160 |
+
background-color: #ecf0f1;
|
161 |
+
border-radius: 20px;
|
162 |
+
margin-bottom: 15px;
|
163 |
+
align-items: center;
|
164 |
+
font-style: italic;
|
165 |
+
color: #7f8c8d;
|
166 |
+
align-self: flex-start;
|
167 |
+
clear: both;
|
168 |
+
}
|
169 |
+
.typing-indicator .dots {
|
170 |
+
display: flex;
|
171 |
+
margin-left: 10px;
|
172 |
+
}
|
173 |
+
.typing-indicator .dot {
|
174 |
+
width: 8px;
|
175 |
+
height: 8px;
|
176 |
+
background-color: #7f8c8d;
|
177 |
+
border-radius: 50%;
|
178 |
+
margin-right: 5px;
|
179 |
+
animation: pulse 1.5s infinite ease-in-out;
|
180 |
+
}
|
181 |
+
.typing-indicator .dot:nth-child(2) {
|
182 |
+
animation-delay: 0.2s;
|
183 |
+
}
|
184 |
+
.typing-indicator .dot:nth-child(3) {
|
185 |
+
animation-delay: 0.4s;
|
186 |
+
}
|
187 |
+
@keyframes pulse {
|
188 |
+
0% { transform: scale(1); }
|
189 |
+
50% { transform: scale(1.2); }
|
190 |
+
100% { transform: scale(1); }
|
191 |
+
}
|
192 |
+
.translate-link {
|
193 |
+
font-size: 14px;
|
194 |
+
color: #3498db;
|
195 |
+
cursor: pointer;
|
196 |
+
text-decoration: underline;
|
197 |
+
position: absolute;
|
198 |
+
right: 15px;
|
199 |
+
bottom: 10px;
|
200 |
+
}
|
201 |
+
.translate-link:hover {
|
202 |
+
color: #2980b9;
|
203 |
+
}
|
204 |
+
.rotate {
|
205 |
+
animation: rotation 2s;
|
206 |
+
}
|
207 |
+
.linear {
|
208 |
+
animation-timing-function: linear;
|
209 |
+
}
|
210 |
+
.infinite {
|
211 |
+
animation-iteration-count: infinite;
|
212 |
+
}
|
213 |
+
@keyframes rotation {
|
214 |
+
from {
|
215 |
+
transform: rotate(0deg);
|
216 |
+
}
|
217 |
+
to {
|
218 |
+
transform: rotate(359deg);
|
219 |
+
}
|
220 |
+
}
|
221 |
+
.center-rotate-container {
|
222 |
+
display: flex;
|
223 |
+
justify-content: center;
|
224 |
+
margin-top: 20px;
|
225 |
+
}
|
226 |
+
body {
|
227 |
+
font-family: 'Roboto', sans-serif;
|
228 |
+
margin: 0;
|
229 |
+
padding: 0;
|
230 |
+
background-color: #f0f2f5;
|
231 |
+
color: #333;
|
232 |
+
}
|
233 |
+
|
234 |
+
.back-button {
|
235 |
+
background-color: #3498db;
|
236 |
+
color: white;
|
237 |
+
border: none;
|
238 |
+
padding: 10px 15px;
|
239 |
+
border-radius: 5px;
|
240 |
+
cursor: pointer;
|
241 |
+
transition: background-color 0.3s ease;
|
242 |
+
position: absolute;
|
243 |
+
top: 20px;
|
244 |
+
left: 20px;
|
245 |
+
z-index: 10;
|
246 |
+
}
|
247 |
+
|
248 |
+
.back-button:hover {
|
249 |
+
background-color: #2980b9;
|
250 |
+
}
|
251 |
+
|
252 |
+
h1 {
|
253 |
+
text-align: center;
|
254 |
+
color: #3498db;
|
255 |
+
margin: 20px 0;
|
256 |
+
}
|
257 |
+
|
258 |
+
.chat-container {
|
259 |
+
max-width: 800px;
|
260 |
+
margin: 0 auto;
|
261 |
+
padding: 20px;
|
262 |
+
background-color: white;
|
263 |
+
border-radius: 10px;
|
264 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
265 |
+
overflow: hidden;
|
266 |
+
position: relative;
|
267 |
+
z-index: 5;
|
268 |
+
padding-bottom: 80px; /* Extra padding to ensure the input box does not cover the last message */
|
269 |
+
}
|
270 |
+
|
271 |
+
.chat-messages {
|
272 |
+
height: 400px;
|
273 |
+
overflow-y: auto;
|
274 |
+
padding: 20px;
|
275 |
+
box-sizing: border-box;
|
276 |
+
display: flex;
|
277 |
+
flex-direction: column;
|
278 |
+
}
|
279 |
+
|
280 |
+
.chat-input {
|
281 |
+
display: flex;
|
282 |
+
align-items: center;
|
283 |
+
padding: 10px;
|
284 |
+
background-color: #ecf0f1;
|
285 |
+
box-sizing: border-box;
|
286 |
+
position: fixed;
|
287 |
+
bottom: 0;
|
288 |
+
left: 0;
|
289 |
+
width: 100%;
|
290 |
+
}
|
291 |
+
|
292 |
+
.chat-input input {
|
293 |
+
flex-grow: 1;
|
294 |
+
min-width: 0;
|
295 |
+
padding: 10px;
|
296 |
+
border: 1px solid #ccc;
|
297 |
+
border-radius: 20px;
|
298 |
+
font-size: 16px;
|
299 |
+
box-sizing: border-box;
|
300 |
+
overflow-wrap: break-word;
|
301 |
+
}
|
302 |
+
|
303 |
+
.chat-input button {
|
304 |
+
margin-left: 10px;
|
305 |
+
padding: 10px 20px;
|
306 |
+
background-color: #3498db;
|
307 |
+
color: white;
|
308 |
+
border: none;
|
309 |
+
border-radius: 20px;
|
310 |
+
cursor: pointer;
|
311 |
+
transition: background-color 0.3s ease;
|
312 |
+
}
|
313 |
+
|
314 |
+
.chat-input button:hover {
|
315 |
+
background-color: #2980b9;
|
316 |
+
}
|
317 |
+
|
318 |
+
.image-upload {
|
319 |
+
margin-right: 10px;
|
320 |
+
}
|
321 |
+
|
322 |
+
.image-upload input[type="file"] {
|
323 |
+
display: none;
|
324 |
+
}
|
325 |
+
|
326 |
+
.image-upload label {
|
327 |
+
cursor: pointer;
|
328 |
+
font-size: 24px;
|
329 |
+
color: #3498db;
|
330 |
+
transition: color 0.3s ease;
|
331 |
+
}
|
332 |
+
|
333 |
+
.image-upload label:hover {
|
334 |
+
color: #2980b9;
|
335 |
+
}
|
336 |
+
|
337 |
+
.message {
|
338 |
+
display: block;
|
339 |
+
max-width: 80%;
|
340 |
+
margin-bottom: 15px;
|
341 |
+
padding: 10px 15px;
|
342 |
+
border-radius: 20px;
|
343 |
+
box-sizing: border-box;
|
344 |
+
word-wrap: break-word;
|
345 |
+
position: relative;
|
346 |
+
clear: both;
|
347 |
+
}
|
348 |
+
|
349 |
+
.user-message {
|
350 |
+
background-color: #3498db;
|
351 |
+
color: white;
|
352 |
+
float: right;
|
353 |
+
}
|
354 |
+
|
355 |
+
.ai-message {
|
356 |
+
background-color: #c1cccc;
|
357 |
+
color: #333;
|
358 |
+
float: left;
|
359 |
+
padding-bottom: 30px; /* Space for translate option */
|
360 |
+
}
|
361 |
+
|
362 |
+
.message img {
|
363 |
+
max-width: 100%;
|
364 |
+
border-radius: 10px;
|
365 |
+
margin-top: 10px;
|
366 |
+
}
|
367 |
+
|
368 |
+
.background-image {
|
369 |
+
position: fixed;
|
370 |
+
top: 0;
|
371 |
+
left: 0;
|
372 |
+
width: 100%;
|
373 |
+
height: 100%;
|
374 |
+
background-image: url('https://hashagile.com/wp-content/uploads/2022/02/ils_13.svg');
|
375 |
+
background-size: cover;
|
376 |
+
background-position: center;
|
377 |
+
opacity: 0.1;
|
378 |
+
z-index: -1;
|
379 |
+
}
|
380 |
+
|
381 |
+
.features {
|
382 |
+
display: flex;
|
383 |
+
justify-content: center;
|
384 |
+
margin-bottom: 20px;
|
385 |
+
}
|
386 |
+
|
387 |
+
.feature-icon {
|
388 |
+
font-size: 24px;
|
389 |
+
margin: 0 15px;
|
390 |
+
color: #3498db;
|
391 |
+
cursor: pointer;
|
392 |
+
transition: transform 0.3s ease, color 0.3s ease;
|
393 |
+
}
|
394 |
+
|
395 |
+
.feature-icon:hover {
|
396 |
+
transform: scale(1.2);
|
397 |
+
color: #2980b9;
|
398 |
+
}
|
399 |
+
|
400 |
+
.typing-indicator {
|
401 |
+
display: flex;
|
402 |
+
padding: 10px;
|
403 |
+
background-color: #ecf0f1;
|
404 |
+
border-radius: 20px;
|
405 |
+
margin-bottom: 15px;
|
406 |
+
align-items: center;
|
407 |
+
font-style: italic;
|
408 |
+
color: #7f8c8d;
|
409 |
+
align-self: flex-start;
|
410 |
+
clear: both;
|
411 |
+
}
|
412 |
+
|
413 |
+
.typing-indicator .dots {
|
414 |
+
display: flex;
|
415 |
+
margin-left: 10px;
|
416 |
+
}
|
417 |
+
|
418 |
+
.typing-indicator .dot {
|
419 |
+
width: 8px;
|
420 |
+
height: 8px;
|
421 |
+
background-color: #7f8c8d;
|
422 |
+
border-radius: 50%;
|
423 |
+
margin-right: 5px;
|
424 |
+
animation: pulse 1.5s infinite ease-in-out;
|
425 |
+
}
|
426 |
+
|
427 |
+
.typing-indicator .dot:nth-child(2) {
|
428 |
+
animation-delay: 0.2s;
|
429 |
+
}
|
430 |
+
|
431 |
+
.typing-indicator .dot:nth-child(3) {
|
432 |
+
animation-delay: 0.4s;
|
433 |
+
}
|
434 |
+
|
435 |
+
@keyframes pulse {
|
436 |
+
0% { transform: scale(1); }
|
437 |
+
50% { transform: scale(1.2); }
|
438 |
+
100% { transform: scale(1); }
|
439 |
+
}
|
440 |
+
|
441 |
+
.translate-link {
|
442 |
+
font-size: 14px;
|
443 |
+
color: #3498db;
|
444 |
+
cursor: pointer;
|
445 |
+
text-decoration: underline;
|
446 |
+
position: absolute;
|
447 |
+
right: 15px;
|
448 |
+
bottom: 10px;
|
449 |
+
}
|
450 |
+
|
451 |
+
.translate-link:hover {
|
452 |
+
color: #2980b9;
|
453 |
+
}
|
454 |
+
|
455 |
+
.rotate {
|
456 |
+
animation: rotation 2s;
|
457 |
+
}
|
458 |
+
|
459 |
+
.linear {
|
460 |
+
animation-timing-function: linear;
|
461 |
+
}
|
462 |
+
|
463 |
+
.infinite {
|
464 |
+
animation-iteration-count: infinite;
|
465 |
+
}
|
466 |
+
|
467 |
+
@keyframes rotation {
|
468 |
+
from {
|
469 |
+
transform: rotate(0deg);
|
470 |
+
}
|
471 |
+
to {
|
472 |
+
transform: rotate(359deg);
|
473 |
+
}
|
474 |
+
}
|
475 |
+
|
476 |
+
.center-rotate-container {
|
477 |
+
display: flex;
|
478 |
+
justify-content: center;
|
479 |
+
margin-top: 20px;
|
480 |
+
}
|
481 |
+
|
482 |
+
</style>
|
483 |
+
</head>
|
484 |
+
<body>
|
485 |
+
<div class="background-image"></div>
|
486 |
+
<button class="back-button" onclick="goBack()"><i class="fas fa-arrow-left"></i> Back</button>
|
487 |
+
<h1><i class="fas fa-robot"></i> AI Tutor</h1>
|
488 |
+
<div class="features">
|
489 |
+
<i class="fas fa-microphone feature-icon" title="Voice Input"></i>
|
490 |
+
<i class="fas fa-language feature-icon" title="Language Translation"></i>
|
491 |
+
<i class="fas fa-book feature-icon" title="Study Resources"></i>
|
492 |
+
<i class="fas fa-chart-line feature-icon" title="Progress Tracking"></i>
|
493 |
+
</div>
|
494 |
+
<div class="center-rotate-container">
|
495 |
+
<img src="https://hashagile.com/wp-content/uploads/2022/02/ils_13_1.svg" class="rotate linear infinite" width="150" height="150" />
|
496 |
+
</div>
|
497 |
+
<div class="">
|
498 |
+
<div id="chat-messages" class="chat-messages"></div>
|
499 |
+
<div class="chat-input">
|
500 |
+
<div class="image-upload">
|
501 |
+
<label for="image-file">
|
502 |
+
<i class="fas fa-paperclip"></i>
|
503 |
+
</label>
|
504 |
+
<input type="file" id="image-file" accept="image/*">
|
505 |
+
</div>
|
506 |
+
<input type="text" id="user-input" placeholder="Ask your question...">
|
507 |
+
<button onclick="sendMessage()"><i class="fas fa-paper-plane"></i> Send</button>
|
508 |
+
</div>
|
509 |
+
</div>
|
510 |
+
|
511 |
+
<script>
|
512 |
+
function sendMessage() {
|
513 |
+
const message = document.getElementById('user-input').value.trim();
|
514 |
+
if (message) {
|
515 |
+
addMessage(message, true);
|
516 |
+
document.getElementById('user-input').value = '';
|
517 |
+
showTypingIndicator();
|
518 |
+
fetch('/chat', {
|
519 |
+
method: 'POST',
|
520 |
+
headers: {
|
521 |
+
'Content-Type': 'application/json',
|
522 |
+
},
|
523 |
+
body: JSON.stringify({ message: message }),
|
524 |
+
})
|
525 |
+
.then(response => response.json())
|
526 |
+
.then(data => {
|
527 |
+
hideTypingIndicator();
|
528 |
+
addMessage(data.response, false);
|
529 |
+
})
|
530 |
+
.catch(error => {
|
531 |
+
console.error('Error:', error);
|
532 |
+
hideTypingIndicator();
|
533 |
+
});
|
534 |
+
}
|
535 |
+
}
|
536 |
+
|
537 |
+
function addMessage(content, isUser, imageUrl) {
|
538 |
+
const messageWrapper = document.createElement('div');
|
539 |
+
const messageDiv = document.createElement('div');
|
540 |
+
messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
|
541 |
+
|
542 |
+
if (imageUrl) {
|
543 |
+
const img = document.createElement('img');
|
544 |
+
img.src = imageUrl;
|
545 |
+
messageDiv.appendChild(img);
|
546 |
+
}
|
547 |
+
|
548 |
+
const textDiv = document.createElement('div');
|
549 |
+
textDiv.textContent = content;
|
550 |
+
messageDiv.appendChild(textDiv);
|
551 |
+
|
552 |
+
if (!isUser) {
|
553 |
+
const translateLink = document.createElement('span');
|
554 |
+
translateLink.className = 'translate-link';
|
555 |
+
translateLink.textContent = 'Translate';
|
556 |
+
translateLink.onclick = function() {
|
557 |
+
translateMessage(textDiv);
|
558 |
+
};
|
559 |
+
messageDiv.appendChild(translateLink);
|
560 |
+
}
|
561 |
+
|
562 |
+
messageWrapper.appendChild(messageDiv);
|
563 |
+
document.getElementById('chat-messages').appendChild(messageWrapper);
|
564 |
+
document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
|
565 |
+
}
|
566 |
+
|
567 |
+
function showTypingIndicator() {
|
568 |
+
const typingDiv = document.createElement('div');
|
569 |
+
typingDiv.className = 'typing-indicator';
|
570 |
+
typingDiv.innerHTML = 'AI is typing<div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>';
|
571 |
+
document.getElementById('chat-messages').appendChild(typingDiv);
|
572 |
+
document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
|
573 |
+
}
|
574 |
+
|
575 |
+
function hideTypingIndicator() {
|
576 |
+
const typingIndicator = document.querySelector('.typing-indicator');
|
577 |
+
if (typingIndicator) {
|
578 |
+
typingIndicator.remove();
|
579 |
+
}
|
580 |
+
}
|
581 |
+
|
582 |
+
document.getElementById('user-input').addEventListener('keypress', function(e) {
|
583 |
+
if (e.key === 'Enter') {
|
584 |
+
sendMessage();
|
585 |
+
}
|
586 |
+
});
|
587 |
+
|
588 |
+
document.getElementById('image-file').addEventListener('change', function(event) {
|
589 |
+
const file = event.target.files[0];
|
590 |
+
if (file) {
|
591 |
+
const reader = new FileReader();
|
592 |
+
reader.onload = function(e) {
|
593 |
+
addMessage('Image uploaded', true, e.target.result);
|
594 |
+
}
|
595 |
+
reader.readAsDataURL(file);
|
596 |
+
|
597 |
+
const formData = new FormData();
|
598 |
+
formData.append('image-file', file);
|
599 |
+
|
600 |
+
showTypingIndicator();
|
601 |
+
fetch('/upload_image_for_ocr', {
|
602 |
+
method: 'POST',
|
603 |
+
body: formData
|
604 |
+
})
|
605 |
+
.then(response => response.json())
|
606 |
+
.then(data => {
|
607 |
+
hideTypingIndicator();
|
608 |
+
addMessage(data.ai_response, false);
|
609 |
+
})
|
610 |
+
.catch(error => {
|
611 |
+
console.error('Error:', error);
|
612 |
+
hideTypingIndicator();
|
613 |
+
});
|
614 |
+
}
|
615 |
+
});
|
616 |
+
|
617 |
+
|
618 |
+
function goBack() {
|
619 |
+
window.history.back();
|
620 |
+
}
|
621 |
+
|
622 |
+
// Add welcome message
|
623 |
+
window.onload = function() {
|
624 |
+
addMessage("Hello! I'm your AI Tutor. How can I help you today?", false);
|
625 |
+
}
|
626 |
+
function translateMessage(messageDiv) {
|
627 |
+
const text = messageDiv.textContent;
|
628 |
+
|
629 |
+
fetch('/translate', {
|
630 |
+
method: 'POST',
|
631 |
+
headers: {
|
632 |
+
'Content-Type': 'application/json'
|
633 |
+
},
|
634 |
+
body: JSON.stringify({ text: text })
|
635 |
+
})
|
636 |
+
.then(response => response.json())
|
637 |
+
.then(data => {
|
638 |
+
if (data.translated_text) {
|
639 |
+
messageDiv.textContent = data.translated_text;
|
640 |
+
}
|
641 |
+
})
|
642 |
+
.catch(error => {
|
643 |
+
console.error('Error:', error);
|
644 |
+
});
|
645 |
+
}</script>
|
646 |
+
</body>
|
647 |
+
</html>
|
templates/student_courses.html
ADDED
@@ -0,0 +1,164 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Course Page - SmartLearn</title>
|
7 |
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
9 |
+
<link rel="stylesheet" href="{{ url_for('static', filename='student_course.css') }}">
|
10 |
+
</head>
|
11 |
+
<body>
|
12 |
+
<style>
|
13 |
+
.logo {
|
14 |
+
font-size: 28px;
|
15 |
+
font-weight: 700;
|
16 |
+
color: #fff;
|
17 |
+
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
18 |
+
display: flex;
|
19 |
+
align-items: center;
|
20 |
+
}
|
21 |
+
|
22 |
+
.logo img {
|
23 |
+
height: 40px;
|
24 |
+
margin-right: 10px;
|
25 |
+
}
|
26 |
+
|
27 |
+
|
28 |
+
.nav-bar {
|
29 |
+
background-color: #fff;
|
30 |
+
padding: 10px 0;
|
31 |
+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
32 |
+
}
|
33 |
+
|
34 |
+
.nav-bar ul {
|
35 |
+
list-style-type: none;
|
36 |
+
margin: 0;
|
37 |
+
padding: 0;
|
38 |
+
display: flex;
|
39 |
+
justify-content: center;
|
40 |
+
align-items: center;
|
41 |
+
}
|
42 |
+
|
43 |
+
.nav-bar li {
|
44 |
+
margin: 0 15px;
|
45 |
+
}
|
46 |
+
|
47 |
+
.nav-bar a {
|
48 |
+
text-decoration: none;
|
49 |
+
color: var(--text-color);
|
50 |
+
font-weight: 600;
|
51 |
+
transition: all 0.3s ease;
|
52 |
+
display: flex;
|
53 |
+
align-items: center;
|
54 |
+
}
|
55 |
+
|
56 |
+
.nav-bar a img {
|
57 |
+
height: 24px;
|
58 |
+
margin-right: 5px;
|
59 |
+
}
|
60 |
+
|
61 |
+
</style>
|
62 |
+
|
63 |
+
<header>
|
64 |
+
<div class="container">
|
65 |
+
<div class="header-content">
|
66 |
+
<div class="logo"><img src="../static/smart-learn.jpeg" alt="">SmartLearn</div>
|
67 |
+
<div class="search-bar">
|
68 |
+
<input type="text" placeholder="Search for anything">
|
69 |
+
<div class="ai-tools">
|
70 |
+
<i class="fas fa-camera" title="Photo Question Answering"></i>
|
71 |
+
<i class="fas fa-brain" title="AI Tutor"></i>
|
72 |
+
<i class="fas fa-robot" title="AI Assistant"></i>
|
73 |
+
</div>
|
74 |
+
</div>
|
75 |
+
<div class="user-actions">
|
76 |
+
<span class="points-display">1500 pts</span>
|
77 |
+
<div class="profile-icon">U</div>
|
78 |
+
</div>
|
79 |
+
</div>
|
80 |
+
</div>
|
81 |
+
</header>
|
82 |
+
<nav class="nav-bar">
|
83 |
+
<ul>
|
84 |
+
<li><a href="{{ url_for('student') }}"><img src="https://cdn-icons-png.flaticon.com/512/1946/1946488.png" alt="Home">Home</a></li>
|
85 |
+
<li><a href="{{ url_for('student') }}#ai-powered-tools"><img src="https://www.kalupurbank.com/wp-content/uploads/2023/02/robot-chatbot-icon-sign-free-vector.webp" alt="Home">Ai Tools</a></li>
|
86 |
+
<li><a href="{{ url_for('homework') }}"><img src="https://cdn-icons-png.flaticon.com/512/1828/1828919.png" alt="Homework">Homework</a></li>
|
87 |
+
<li><a href="{{ url_for('student_courses') }}"><img src="https://cdn-icons-png.flaticon.com/512/1048/1048953.png" alt="Courses">Courses</a></li>
|
88 |
+
<li><a href="{{ url_for('speak') }}"><img src="https://cdn-icons-png.flaticon.com/512/4712/4712026.png" alt="Speak With AI">Speak With AI</a></li>
|
89 |
+
<li><a href="{{ url_for('summarise_video') }}"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/1280px-YouTube_full-color_icon_%282017%29.svg.png" alt="Ssummarise_video">summarise_video</a></li>
|
90 |
+
</ul>
|
91 |
+
</nav>
|
92 |
+
|
93 |
+
|
94 |
+
<main class="container">
|
95 |
+
<div class="course-content">
|
96 |
+
<div class="main-content">
|
97 |
+
<h2>Course Overview</h2>
|
98 |
+
<p>This course provides a comprehensive introduction to Artificial Intelligence, covering key concepts, algorithms, and applications.</p>
|
99 |
+
|
100 |
+
<form id="concept-form">
|
101 |
+
<input type="text" id="concept-input" placeholder="Enter a concept to learn">
|
102 |
+
<button type="submit">Search</button>
|
103 |
+
</form>
|
104 |
+
|
105 |
+
<h3>Current Lesson: <span id="lesson-title">Neural Networks</span></h3>
|
106 |
+
<div class="video-container">
|
107 |
+
<iframe id="video-frame" src="https://www.youtube.com/embed/aircAruvnKk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
|
108 |
+
</div>
|
109 |
+
|
110 |
+
<h3>Course Materials</h3>
|
111 |
+
<ul class="pdf-list">
|
112 |
+
<li><a href="#"><i class="fas fa-file-pdf"></i> Lecture Notes - Week 1</a></li>
|
113 |
+
<li><a href="#"><i class="fas fa-file-pdf"></i> Lecture Notes - Week 2</a></li>
|
114 |
+
<li><a href="#"><i class="fas fa-file-pdf"></i> Assignment 1</a></li>
|
115 |
+
</ul>
|
116 |
+
|
117 |
+
<div class="progress-bar">
|
118 |
+
<div class="progress" style="width: 60%;"></div>
|
119 |
+
</div>
|
120 |
+
<p>Course Progress: 60%</p>
|
121 |
+
</div>
|
122 |
+
|
123 |
+
<aside class="sidebar">
|
124 |
+
<h3>Additional Resources</h3>
|
125 |
+
<ul class="resource-list">
|
126 |
+
<li><a href="#"><i class="fas fa-book"></i> Textbook: AI: A Modern Approach</a></li>
|
127 |
+
<li><a href="#"><i class="fas fa-link"></i> AI Ethics Guidelines</a></li>
|
128 |
+
<li><a href="#"><i class="fas fa-code"></i> Python for AI (Tutorial)</a></li>
|
129 |
+
</ul>
|
130 |
+
|
131 |
+
<h3>Upcoming Deadlines</h3>
|
132 |
+
<ul>
|
133 |
+
<li>Assignment 1 Due: July 15, 2024</li>
|
134 |
+
<li>Quiz 1: July 20, 2024</li>
|
135 |
+
</ul>
|
136 |
+
</aside>
|
137 |
+
</div>
|
138 |
+
</main>
|
139 |
+
|
140 |
+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
141 |
+
<script>
|
142 |
+
$(document).ready(function() {
|
143 |
+
$('#concept-form').submit(function(e) {
|
144 |
+
e.preventDefault();
|
145 |
+
var concept = $('#concept-input').val();
|
146 |
+
|
147 |
+
$.ajax({
|
148 |
+
url: '/search_youtube',
|
149 |
+
method: 'POST',
|
150 |
+
contentType: 'application/json',
|
151 |
+
data: JSON.stringify({query: concept}),
|
152 |
+
success: function(response) {
|
153 |
+
$('#video-frame').attr('src', `https://www.youtube.com/embed/${response.videoId}`);
|
154 |
+
$('#lesson-title').text(response.videoTitle);
|
155 |
+
},
|
156 |
+
error: function(jqXHR, textStatus, errorThrown) {
|
157 |
+
alert('An error occurred while searching for videos: ' + errorThrown);
|
158 |
+
}
|
159 |
+
});
|
160 |
+
});
|
161 |
+
});
|
162 |
+
</script>
|
163 |
+
</body>
|
164 |
+
</html>
|
templates/student_pdfqa.html
ADDED
@@ -0,0 +1,501 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>SmartLearn - PDF Q&A</title>
|
7 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
8 |
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
9 |
+
<style>
|
10 |
+
.audio-container {
|
11 |
+
display: none;
|
12 |
+
}
|
13 |
+
.audio-list {
|
14 |
+
display: block;
|
15 |
+
margin-top: 1rem;
|
16 |
+
}
|
17 |
+
.audio-list ul {
|
18 |
+
list-style-type: none;
|
19 |
+
padding: 0;
|
20 |
+
}
|
21 |
+
.audio-list li {
|
22 |
+
padding: 0.5rem;
|
23 |
+
cursor: pointer;
|
24 |
+
transition: background-color 0.3s ease;
|
25 |
+
}
|
26 |
+
.audio-list li:hover {
|
27 |
+
background-color: #f0f2f5;
|
28 |
+
}
|
29 |
+
.audio-list {
|
30 |
+
display: block;
|
31 |
+
margin-top: 1rem;
|
32 |
+
}
|
33 |
+
.audio-container {
|
34 |
+
display: none;
|
35 |
+
}
|
36 |
+
|
37 |
+
.audio-list ul {
|
38 |
+
list-style-type: none;
|
39 |
+
padding: 0;
|
40 |
+
}
|
41 |
+
.audio-list li {
|
42 |
+
padding: 0.5rem;
|
43 |
+
cursor: pointer;
|
44 |
+
transition: background-color 0.3s ease;
|
45 |
+
}
|
46 |
+
.audio-list li:hover {
|
47 |
+
background-color: #f0f2f5;
|
48 |
+
}
|
49 |
+
body {
|
50 |
+
font-family: 'Roboto', sans-serif;
|
51 |
+
background-color: #f0f2f5;
|
52 |
+
margin: 0;
|
53 |
+
padding: 0;
|
54 |
+
color: #333;
|
55 |
+
height: 100vh;
|
56 |
+
display: flex;
|
57 |
+
flex-direction: column;
|
58 |
+
}
|
59 |
+
video#background-video {
|
60 |
+
position: fixed;
|
61 |
+
top: 0;
|
62 |
+
left: 0;
|
63 |
+
width: 100%;
|
64 |
+
height: 100%;
|
65 |
+
object-fit: cover;
|
66 |
+
z-index: -1;
|
67 |
+
}
|
68 |
+
.container {
|
69 |
+
flex: 1;
|
70 |
+
display: flex;
|
71 |
+
flex-direction: column;
|
72 |
+
max-width: 1200px;
|
73 |
+
margin: 2rem auto;
|
74 |
+
padding: 2rem;
|
75 |
+
background-color: rgba(255, 255, 255, 0.9);
|
76 |
+
border-radius: 10px;
|
77 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
78 |
+
overflow: hidden;
|
79 |
+
}
|
80 |
+
.content-wrapper {
|
81 |
+
display: flex;
|
82 |
+
flex: 1;
|
83 |
+
overflow: hidden;
|
84 |
+
}
|
85 |
+
.pdf-container, .chat-container,.audio-container {
|
86 |
+
flex: 1;
|
87 |
+
background-color: white;
|
88 |
+
border-radius: 10px;
|
89 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
90 |
+
display: flex;
|
91 |
+
flex-direction: column;
|
92 |
+
overflow: hidden;
|
93 |
+
}
|
94 |
+
.pdf-container {
|
95 |
+
margin-right: 1rem;
|
96 |
+
}
|
97 |
+
.chat-container {
|
98 |
+
margin-left: 1rem;
|
99 |
+
}
|
100 |
+
h1 {
|
101 |
+
text-align: center;
|
102 |
+
color: #333;
|
103 |
+
margin-bottom: 2rem;
|
104 |
+
}
|
105 |
+
.back-button {
|
106 |
+
align-self: flex-start;
|
107 |
+
background-color: #3498db;
|
108 |
+
color: white;
|
109 |
+
border: none;
|
110 |
+
padding: 0.5rem 1rem;
|
111 |
+
border-radius: 5px;
|
112 |
+
cursor: pointer;
|
113 |
+
transition: background-color 0.3s ease;
|
114 |
+
margin-bottom: 1rem;
|
115 |
+
}
|
116 |
+
.back-button:hover {
|
117 |
+
background-color: #2980b9;
|
118 |
+
}
|
119 |
+
.pdf-upload {
|
120 |
+
display: flex;
|
121 |
+
justify-content: center;
|
122 |
+
align-items: center;
|
123 |
+
padding: 1rem;
|
124 |
+
background-color: #f8f9fa;
|
125 |
+
border-radius: 10px 10px 0 0;
|
126 |
+
}
|
127 |
+
.pdf-upload input[type="file"] {
|
128 |
+
display: none;
|
129 |
+
}
|
130 |
+
.pdf-upload label {
|
131 |
+
background-color: #3498db;
|
132 |
+
color: white;
|
133 |
+
padding: 0.5rem 1rem;
|
134 |
+
border-radius: 5px;
|
135 |
+
cursor: pointer;
|
136 |
+
transition: background-color 0.3s ease;
|
137 |
+
}
|
138 |
+
.pdf-upload label:hover {
|
139 |
+
background-color: #2980b9;
|
140 |
+
}
|
141 |
+
.pdf-upload button {
|
142 |
+
background-color: #2ecc71;
|
143 |
+
color: white;
|
144 |
+
border: none;
|
145 |
+
padding: 0.5rem 1rem;
|
146 |
+
border-radius: 5px;
|
147 |
+
cursor: pointer;
|
148 |
+
margin-left: 1rem;
|
149 |
+
transition: background-color 0.3s ease;
|
150 |
+
}
|
151 |
+
.pdf-upload button:hover {
|
152 |
+
background-color: #27ae60;
|
153 |
+
}
|
154 |
+
.pdf-status {
|
155 |
+
text-align: center;
|
156 |
+
padding: 0.5rem;
|
157 |
+
background-color: #f8f9fa;
|
158 |
+
border-bottom: 1px solid #e9ecef;
|
159 |
+
}
|
160 |
+
.pdf-content {
|
161 |
+
flex: 1;
|
162 |
+
padding: 1rem;
|
163 |
+
overflow-y: auto;
|
164 |
+
font-size: 0.9rem;
|
165 |
+
line-height: 1.5;
|
166 |
+
}
|
167 |
+
.chat-messages {
|
168 |
+
flex: 1;
|
169 |
+
overflow-y: auto;
|
170 |
+
padding: 1rem;
|
171 |
+
}
|
172 |
+
.message {
|
173 |
+
margin-bottom: 1rem;
|
174 |
+
padding: 0.5rem 1rem;
|
175 |
+
border-radius: 20px;
|
176 |
+
max-width: 80%;
|
177 |
+
}
|
178 |
+
.user-message {
|
179 |
+
background-color: #3498db;
|
180 |
+
color: white;
|
181 |
+
align-self: flex-end;
|
182 |
+
margin-left: auto;
|
183 |
+
}
|
184 |
+
.ai-message {
|
185 |
+
background-color: #ecf0f1;
|
186 |
+
color: #333;
|
187 |
+
}
|
188 |
+
.chat-input {
|
189 |
+
display: flex;
|
190 |
+
padding: 1rem;
|
191 |
+
background-color: #f8f9fa;
|
192 |
+
border-top: 1px solid #e9ecef;
|
193 |
+
}
|
194 |
+
.chat-input input {
|
195 |
+
flex-grow: 1;
|
196 |
+
padding: 0.5rem;
|
197 |
+
border: 1px solid #ced4da;
|
198 |
+
border-radius: 20px;
|
199 |
+
margin-right: 1rem;
|
200 |
+
}
|
201 |
+
.chat-input button {
|
202 |
+
background-color: #3498db;
|
203 |
+
color: white;
|
204 |
+
border: none;
|
205 |
+
padding: 0.5rem 1rem;
|
206 |
+
border-radius: 20px;
|
207 |
+
cursor: pointer;
|
208 |
+
transition: background-color 0.3s ease;
|
209 |
+
}
|
210 |
+
.chat-input button:hover {
|
211 |
+
background-color: #2980b9;
|
212 |
+
}
|
213 |
+
@keyframes spin {
|
214 |
+
0% { transform: rotate(0deg); }
|
215 |
+
100% { transform: rotate(360deg); }
|
216 |
+
}
|
217 |
+
.loading-icon {
|
218 |
+
animation: spin 2s linear infinite;
|
219 |
+
display: inline-block;
|
220 |
+
margin-right: 0.5rem;
|
221 |
+
}
|
222 |
+
.button-container {
|
223 |
+
display: flex;
|
224 |
+
justify-content: flex-end;
|
225 |
+
margin-bottom: 1rem;
|
226 |
+
}
|
227 |
+
.mode-button {
|
228 |
+
background-color: #3498db;
|
229 |
+
color: white;
|
230 |
+
border: none;
|
231 |
+
padding: 0.5rem 1rem;
|
232 |
+
border-radius: 20px;
|
233 |
+
cursor: pointer;
|
234 |
+
transition: all 0.3s ease;
|
235 |
+
margin-left: 0.5rem;
|
236 |
+
font-weight: 500;
|
237 |
+
display: flex;
|
238 |
+
align-items: center;
|
239 |
+
}
|
240 |
+
.mode-button:hover {
|
241 |
+
background-color: #2980b9;
|
242 |
+
transform: translateY(-2px);
|
243 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
244 |
+
}
|
245 |
+
.mode-button i {
|
246 |
+
margin-right: 0.5rem;
|
247 |
+
}
|
248 |
+
.active {
|
249 |
+
background-color: #2ecc71;
|
250 |
+
}
|
251 |
+
.active:hover {
|
252 |
+
background-color: #27ae60;
|
253 |
+
}
|
254 |
+
.audio-player {
|
255 |
+
display: none;
|
256 |
+
width: 100%;
|
257 |
+
margin-top: 1rem;
|
258 |
+
}
|
259 |
+
.audio-player audio {
|
260 |
+
width: 100%;
|
261 |
+
border-radius: 10px;
|
262 |
+
}
|
263 |
+
.audio-list {
|
264 |
+
display: none;
|
265 |
+
margin-top: 1rem;
|
266 |
+
}
|
267 |
+
.audio-list ul {
|
268 |
+
list-style-type: none;
|
269 |
+
padding: 0;
|
270 |
+
}
|
271 |
+
.audio-list li {
|
272 |
+
padding: 0.5rem;
|
273 |
+
cursor: pointer;
|
274 |
+
transition: background-color 0.3s ease;
|
275 |
+
}
|
276 |
+
.audio-list li:hover {
|
277 |
+
background-color: #f0f2f5;
|
278 |
+
}
|
279 |
+
</style>
|
280 |
+
</head>
|
281 |
+
<body>
|
282 |
+
<video id="background-video" autoplay loop muted>
|
283 |
+
<source src="../static/pdf.mp4" type="video/mp4">
|
284 |
+
Your browser does not support the video tag.
|
285 |
+
</video>
|
286 |
+
<div class="container">
|
287 |
+
<button class="back-button" onclick="goBack()"><i class="fas fa-arrow-left"></i> Back</button>
|
288 |
+
<h1><i class="fas fa-file-pdf"></i> PDF Q&A</h1>
|
289 |
+
<div class="button-container">
|
290 |
+
<button id="text-mode" class="mode-button active" onclick="switchMode('text')">
|
291 |
+
<i class="fas fa-keyboard"></i> Ask questions
|
292 |
+
</button>
|
293 |
+
<button id="audio-mode" class="mode-button" onclick="switchMode('audio')">
|
294 |
+
<i class="fas fa-microphone"></i> Audio book
|
295 |
+
</button>
|
296 |
+
</div>
|
297 |
+
<div class="content-wrapper">
|
298 |
+
<div class="pdf-container">
|
299 |
+
<div class="pdf-upload">
|
300 |
+
<label for="pdf-file">
|
301 |
+
<i class="fas fa-upload"></i> Choose PDF
|
302 |
+
</label>
|
303 |
+
<input type="file" id="pdf-file" accept=".pdf">
|
304 |
+
<button onclick="uploadPDF()"><i class="fas fa-cloud-upload-alt"></i> Upload PDF</button>
|
305 |
+
</div>
|
306 |
+
<div id="pdf-status" class="pdf-status"></div>
|
307 |
+
<div id="pdf-content" class="pdf-content"></div>
|
308 |
+
</div>
|
309 |
+
<div class="chat-container">
|
310 |
+
<div id="chat-messages" class="chat-messages"></div>
|
311 |
+
<div id="text-input" class="chat-input">
|
312 |
+
<input type="text" id="user-input" placeholder="Ask a question about the PDF...">
|
313 |
+
<button onclick="sendMessage()"><i class="fas fa-paper-plane"></i> Send</button>
|
314 |
+
</div>
|
315 |
+
</div>
|
316 |
+
<div id="audio-container" class="audio-container">
|
317 |
+
<h3>Get your audio book for all chapters here</h3>
|
318 |
+
<audio id="uploaded-audio" controls>
|
319 |
+
Your browser does not support the audio tag.
|
320 |
+
</audio>
|
321 |
+
<div id="audio-list" class="audio-list">
|
322 |
+
<ul>
|
323 |
+
<!-- Audio files will be dynamically inserted here -->
|
324 |
+
</ul>
|
325 |
+
</div>
|
326 |
+
</div>
|
327 |
+
</div>
|
328 |
+
</div>
|
329 |
+
<script>
|
330 |
+
document.getElementById('audio-mode').addEventListener('click', function() {
|
331 |
+
switchMode('audio');
|
332 |
+
});
|
333 |
+
const chatMessages = document.getElementById('chat-messages');
|
334 |
+
const userInput = document.getElementById('user-input');
|
335 |
+
const pdfStatus = document.getElementById('pdf-status');
|
336 |
+
const pdfContent = document.getElementById('pdf-content');
|
337 |
+
let pdfText = '';
|
338 |
+
|
339 |
+
function uploadPDF() {
|
340 |
+
const fileInput = document.getElementById('pdf-file');
|
341 |
+
const file = fileInput.files[0];
|
342 |
+
if (file) {
|
343 |
+
const formData = new FormData();
|
344 |
+
formData.append('pdf-file', file);
|
345 |
+
|
346 |
+
pdfStatus.innerHTML = '<i class="fas fa-spinner loading-icon"></i> Uploading and processing PDF...';
|
347 |
+
|
348 |
+
fetch('/student_pdfqa', {
|
349 |
+
method: 'POST',
|
350 |
+
body: formData
|
351 |
+
})
|
352 |
+
.then(response => response.json())
|
353 |
+
.then(data => {
|
354 |
+
if (data.pdf_text) {
|
355 |
+
pdfText = data.pdf_text;
|
356 |
+
pdfStatus.innerHTML = `<i class="fas fa-check-circle"></i> PDF "${file.name}" uploaded and processed. You can now ask questions.`;
|
357 |
+
displayPDFContent(pdfText);
|
358 |
+
addMessage("PDF uploaded successfully. What would you like to know about its contents?", false);
|
359 |
+
} else {
|
360 |
+
pdfStatus.innerHTML = `<i class="fas fa-exclamation-circle"></i> ${data.message}`;
|
361 |
+
}
|
362 |
+
})
|
363 |
+
.catch(error => {
|
364 |
+
pdfStatus.innerHTML = '<i class="fas fa-times-circle"></i> Error uploading the PDF. Please try again.';
|
365 |
+
console.error('Error:', error);
|
366 |
+
});
|
367 |
+
} else {
|
368 |
+
pdfStatus.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Please select a PDF file first.';
|
369 |
+
}
|
370 |
+
}
|
371 |
+
|
372 |
+
function displayPDFContent(text) {
|
373 |
+
pdfContent.innerHTML = '';
|
374 |
+
const paragraphs = text.split('\n\n');
|
375 |
+
paragraphs.forEach(paragraph => {
|
376 |
+
if (paragraph.trim()) {
|
377 |
+
const p = document.createElement('p');
|
378 |
+
p.textContent = paragraph;
|
379 |
+
pdfContent.appendChild(p);
|
380 |
+
}
|
381 |
+
});
|
382 |
+
}
|
383 |
+
|
384 |
+
function addMessage(content, isUser) {
|
385 |
+
const messageDiv = document.createElement('div');
|
386 |
+
messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
|
387 |
+
messageDiv.textContent = content;
|
388 |
+
chatMessages.appendChild(messageDiv);
|
389 |
+
chatMessages.scrollTop = chatMessages.scrollHeight;
|
390 |
+
}
|
391 |
+
|
392 |
+
function sendMessage() {
|
393 |
+
const message = userInput.value.trim();
|
394 |
+
if (message) {
|
395 |
+
if (!pdfText) {
|
396 |
+
addMessage("Please upload a PDF first before asking questions.", false);
|
397 |
+
return;
|
398 |
+
}
|
399 |
+
addMessage(message, true);
|
400 |
+
userInput.value = '';
|
401 |
+
|
402 |
+
const loadingMessage = document.createElement('div');
|
403 |
+
loadingMessage.className = 'message ai-message';
|
404 |
+
loadingMessage.innerHTML = '<i class="fas fa-spinner loading-icon"></i> Thinking...';
|
405 |
+
chatMessages.appendChild(loadingMessage);
|
406 |
+
chatMessages.scrollTop = chatMessages.scrollHeight;
|
407 |
+
|
408 |
+
fetch('/ask_pdf_question', {
|
409 |
+
method: 'POST',
|
410 |
+
headers: {
|
411 |
+
'Content-Type': 'application/json'
|
412 |
+
},
|
413 |
+
body: JSON.stringify({
|
414 |
+
query: message,
|
415 |
+
pdf_text: pdfText
|
416 |
+
})
|
417 |
+
})
|
418 |
+
.then(response => response.json())
|
419 |
+
.then(data => {
|
420 |
+
chatMessages.removeChild(loadingMessage);
|
421 |
+
addMessage(data.response, false);
|
422 |
+
})
|
423 |
+
.catch(error => {
|
424 |
+
chatMessages.removeChild(loadingMessage);
|
425 |
+
addMessage('Error getting the response. Please try again.', false);
|
426 |
+
console.error('Error:', error);
|
427 |
+
});
|
428 |
+
}
|
429 |
+
}
|
430 |
+
|
431 |
+
userInput.addEventListener('keypress', function(e) {
|
432 |
+
if (e.key === 'Enter') {
|
433 |
+
sendMessage();
|
434 |
+
}
|
435 |
+
});
|
436 |
+
|
437 |
+
function goBack() {
|
438 |
+
window.history.back();
|
439 |
+
}
|
440 |
+
|
441 |
+
function switchMode(mode) {
|
442 |
+
const textButton = document.getElementById('text-mode');
|
443 |
+
const audioButton = document.getElementById('audio-mode');
|
444 |
+
const chatContainer = document.querySelector('.chat-container');
|
445 |
+
const audioContainer = document.getElementById('audio-container');
|
446 |
+
const audioList = document.getElementById('audio-list');
|
447 |
+
|
448 |
+
if (mode === 'text') {
|
449 |
+
textButton.classList.add('active');
|
450 |
+
audioButton.classList.remove('active');
|
451 |
+
chatContainer.style.display = 'flex';
|
452 |
+
audioContainer.style.display = 'none';
|
453 |
+
} else if (mode === 'audio') {
|
454 |
+
audioButton.classList.add('active');
|
455 |
+
textButton.classList.remove('active');
|
456 |
+
chatContainer.style.display = 'none';
|
457 |
+
audioContainer.style.display = 'flex';
|
458 |
+
audioList.style.display = 'block';
|
459 |
+
loadAudioList();
|
460 |
+
}
|
461 |
+
}
|
462 |
+
|
463 |
+
function loadAudioList() {
|
464 |
+
const audioList = document.getElementById('audio-list').querySelector('ul');
|
465 |
+
audioList.innerHTML = '<li>Loading audio files...</li>';
|
466 |
+
|
467 |
+
fetch('/get_audio_files')
|
468 |
+
.then(response => response.json())
|
469 |
+
.then(data => {
|
470 |
+
console.log('Audio files data:', data);
|
471 |
+
audioList.innerHTML = '';
|
472 |
+
if (data.audio_files && data.audio_files.length > 0) {
|
473 |
+
data.audio_files.forEach(file => {
|
474 |
+
console.log('Adding file:', file);
|
475 |
+
const listItem = document.createElement('li');
|
476 |
+
listItem.textContent = file.name;
|
477 |
+
listItem.onclick = () => playAudio(file.url);
|
478 |
+
audioList.appendChild(listItem);
|
479 |
+
});
|
480 |
+
} else {
|
481 |
+
audioList.innerHTML = '<li>No audio files available</li>';
|
482 |
+
}
|
483 |
+
})
|
484 |
+
.catch(error => {
|
485 |
+
console.error('Error loading audio files:', error);
|
486 |
+
audioList.innerHTML = '<li>Error loading audio files</li>';
|
487 |
+
});
|
488 |
+
}
|
489 |
+
|
490 |
+
function playAudio(url) {
|
491 |
+
const audio = document.getElementById('uploaded-audio');
|
492 |
+
audio.src = url;
|
493 |
+
audio.load();
|
494 |
+
audio.play();
|
495 |
+
}
|
496 |
+
|
497 |
+
// Initialize the page in text mode
|
498 |
+
switchMode('text');
|
499 |
+
</script>
|
500 |
+
</body>
|
501 |
+
</html>
|
templates/student_projectideas.html
ADDED
@@ -0,0 +1,285 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>SmartLearn - Project Idea Generator</title>
|
7 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
8 |
+
<style>
|
9 |
+
body {
|
10 |
+
font-family: 'Arial', sans-serif;
|
11 |
+
color: #333;
|
12 |
+
margin: 0;
|
13 |
+
padding: 0;
|
14 |
+
position: relative;
|
15 |
+
}
|
16 |
+
#myVideo {
|
17 |
+
position: fixed;
|
18 |
+
right: 0;
|
19 |
+
bottom: 0;
|
20 |
+
min-width: 100%;
|
21 |
+
min-height: 100%;
|
22 |
+
width: auto;
|
23 |
+
height: auto;
|
24 |
+
z-index: -2;
|
25 |
+
}
|
26 |
+
.container {
|
27 |
+
max-width: 1200px; /* Adjusted for better layout */
|
28 |
+
margin: 40px auto;
|
29 |
+
padding: 20px;
|
30 |
+
background-color: rgba(255, 255, 255, 0.4);
|
31 |
+
border-radius: 10px;
|
32 |
+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
33 |
+
position: relative;
|
34 |
+
z-index: 1;
|
35 |
+
display: flex;
|
36 |
+
flex-wrap: wrap; /* Ensure responsiveness */
|
37 |
+
gap: 20px; /* Space between elements */
|
38 |
+
}
|
39 |
+
h1 {
|
40 |
+
color: #2c3e50;
|
41 |
+
text-align: center;
|
42 |
+
margin-bottom: 30px;
|
43 |
+
width: 100%; /* Ensure full width for heading */
|
44 |
+
}
|
45 |
+
.back-button {
|
46 |
+
position: absolute;
|
47 |
+
top: 20px;
|
48 |
+
left: 20px;
|
49 |
+
background-color: #3498db;
|
50 |
+
color: white;
|
51 |
+
border: none;
|
52 |
+
padding: 10px 15px;
|
53 |
+
border-radius: 50px;
|
54 |
+
cursor: pointer;
|
55 |
+
transition: all 0.3s ease;
|
56 |
+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
57 |
+
display: flex;
|
58 |
+
align-items: center;
|
59 |
+
font-weight: bold;
|
60 |
+
}
|
61 |
+
.back-button:hover {
|
62 |
+
background-color: #2980b9;
|
63 |
+
transform: translateY(-2px);
|
64 |
+
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
65 |
+
}
|
66 |
+
.back-button i {
|
67 |
+
margin-right: 8px;
|
68 |
+
transition: transform 0.3s ease;
|
69 |
+
}
|
70 |
+
.back-button:hover i {
|
71 |
+
transform: rotate(-360deg);
|
72 |
+
}
|
73 |
+
.back-button span {
|
74 |
+
opacity: 0;
|
75 |
+
width: 0;
|
76 |
+
overflow: hidden;
|
77 |
+
transition: all 0.3s ease;
|
78 |
+
}
|
79 |
+
.back-button:hover span {
|
80 |
+
opacity: 1;
|
81 |
+
width: auto;
|
82 |
+
margin-left: 5px;
|
83 |
+
}
|
84 |
+
.project-form,
|
85 |
+
.chat-container {
|
86 |
+
flex: 1;
|
87 |
+
background-color: #ecf0f1;
|
88 |
+
padding: 20px;
|
89 |
+
border-radius: 8px;
|
90 |
+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
91 |
+
}
|
92 |
+
.project-form {
|
93 |
+
margin-bottom: 20px; /* Remove if not needed */
|
94 |
+
}
|
95 |
+
.form-group {
|
96 |
+
margin-bottom: 15px;
|
97 |
+
}
|
98 |
+
.form-group label {
|
99 |
+
display: block;
|
100 |
+
margin-bottom: 5px;
|
101 |
+
color: #2c3e50;
|
102 |
+
font-weight: bold;
|
103 |
+
}
|
104 |
+
.form-group input, .form-group textarea {
|
105 |
+
width: calc(100% - 22px);
|
106 |
+
padding: 10px;
|
107 |
+
border: 1px solid #bdc3c7;
|
108 |
+
border-radius: 4px;
|
109 |
+
font-size: 16px;
|
110 |
+
box-sizing: border-box;
|
111 |
+
}
|
112 |
+
.form-group textarea {
|
113 |
+
height: 100px;
|
114 |
+
resize: vertical;
|
115 |
+
}
|
116 |
+
button {
|
117 |
+
background-color: #2ecc71;
|
118 |
+
color: white;
|
119 |
+
border: none;
|
120 |
+
padding: 10px 20px;
|
121 |
+
border-radius: 5px;
|
122 |
+
cursor: pointer;
|
123 |
+
transition: background-color 0.3s;
|
124 |
+
font-size: 16px;
|
125 |
+
}
|
126 |
+
button:hover {
|
127 |
+
background-color: #27ae60;
|
128 |
+
}
|
129 |
+
.chat-container {
|
130 |
+
background-color: #ffffff;
|
131 |
+
border-radius: 8px;
|
132 |
+
overflow: hidden;
|
133 |
+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
134 |
+
}
|
135 |
+
.chat-messages {
|
136 |
+
height: 300px;
|
137 |
+
overflow-y: auto;
|
138 |
+
padding: 20px;
|
139 |
+
}
|
140 |
+
.message {
|
141 |
+
margin-bottom: 15px;
|
142 |
+
padding: 10px;
|
143 |
+
border-radius: 5px;
|
144 |
+
max-width: 80%;
|
145 |
+
}
|
146 |
+
.user-message {
|
147 |
+
background-color: #3498db;
|
148 |
+
color: white;
|
149 |
+
align-self: flex-end;
|
150 |
+
margin-left: auto;
|
151 |
+
}
|
152 |
+
.ai-message {
|
153 |
+
background-color: #ecf0f1;
|
154 |
+
color: #333;
|
155 |
+
}
|
156 |
+
.chat-input {
|
157 |
+
display: flex;
|
158 |
+
padding: 10px;
|
159 |
+
background-color: #ecf0f1;
|
160 |
+
}
|
161 |
+
.chat-input input {
|
162 |
+
flex-grow: 1;
|
163 |
+
padding: 10px;
|
164 |
+
border: 1px solid #bdc3c7;
|
165 |
+
border-radius: 4px;
|
166 |
+
margin-right: 10px;
|
167 |
+
}
|
168 |
+
.fade-in {
|
169 |
+
animation: fadeIn 0.5s;
|
170 |
+
}
|
171 |
+
@keyframes fadeIn {
|
172 |
+
from { opacity: 0; }
|
173 |
+
to { opacity: 1; }
|
174 |
+
}
|
175 |
+
</style>
|
176 |
+
</head>
|
177 |
+
<body>
|
178 |
+
<video autoplay muted loop id="myVideo">
|
179 |
+
<source src="../static/AI_video.mp4" type="video/mp4">
|
180 |
+
Your browser does not support HTML5 video.
|
181 |
+
</video>
|
182 |
+
|
183 |
+
<div class="container">
|
184 |
+
<button class="back-button" onclick="goBack()">
|
185 |
+
<i class="fas fa-arrow-left"></i>
|
186 |
+
<span>Back</span>
|
187 |
+
</button>
|
188 |
+
<h1><i class="fas fa-lightbulb"></i> Project Idea Generator</h1>
|
189 |
+
<div class="project-form">
|
190 |
+
<div class="form-group">
|
191 |
+
<label for="subject"><i class="fas fa-book"></i> Subject:</label>
|
192 |
+
<input type="text" id="subject" placeholder="e.g., Computer Science, Biology, Art">
|
193 |
+
</div>
|
194 |
+
<div class="form-group">
|
195 |
+
<label for="topic"><i class="fas fa-tag"></i> Specific Topic:</label>
|
196 |
+
<input type="text" id="topic" placeholder="e.g., Machine Learning, Genetics, Modern Art">
|
197 |
+
</div>
|
198 |
+
<div class="form-group">
|
199 |
+
<label for="plan"><i class="fas fa-tasks"></i> Brief Project Plan:</label>
|
200 |
+
<textarea id="plan" placeholder="Outline your initial thoughts or requirements for the project"></textarea>
|
201 |
+
</div>
|
202 |
+
<button onclick="generateProjectIdea()"><i class="fas fa-magic"></i> Generate Project Idea</button>
|
203 |
+
</div>
|
204 |
+
<div class="chat-container">
|
205 |
+
<div id="chat-messages" class="chat-messages"></div>
|
206 |
+
<div class="chat-input">
|
207 |
+
<input type="text" id="user-input" placeholder="Ask follow-up questions about the project idea...">
|
208 |
+
<button onclick="sendMessage()"><i class="fas fa-paper-plane"></i> Send</button>
|
209 |
+
</div>
|
210 |
+
</div>
|
211 |
+
</div>
|
212 |
+
|
213 |
+
<script>
|
214 |
+
const chatMessages = document.getElementById('chat-messages');
|
215 |
+
const userInput = document.getElementById('user-input');
|
216 |
+
let currentProjectIdea = '';
|
217 |
+
|
218 |
+
function addMessage(content, isUser) {
|
219 |
+
const messageDiv = document.createElement('div');
|
220 |
+
messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'} fade-in`;
|
221 |
+
messageDiv.innerHTML = content.replace(/\n/g, '<br>');
|
222 |
+
chatMessages.appendChild(messageDiv);
|
223 |
+
chatMessages.scrollTop = chatMessages.scrollHeight;
|
224 |
+
}
|
225 |
+
|
226 |
+
function generateProjectIdea() {
|
227 |
+
const subject = document.getElementById('subject').value;
|
228 |
+
const topic = document.getElementById('topic').value;
|
229 |
+
const plan = document.getElementById('plan').value;
|
230 |
+
|
231 |
+
addMessage(`Generating project idea for ${subject} - ${topic}`, true);
|
232 |
+
|
233 |
+
fetch('/generate_project_idea', {
|
234 |
+
method: 'POST',
|
235 |
+
headers: {
|
236 |
+
'Content-Type': 'application/json'
|
237 |
+
},
|
238 |
+
body: JSON.stringify({ subject, topic, plan })
|
239 |
+
})
|
240 |
+
.then(response => response.json())
|
241 |
+
.then(data => {
|
242 |
+
currentProjectIdea = data.project_idea;
|
243 |
+
addMessage(currentProjectIdea, false);
|
244 |
+
})
|
245 |
+
.catch(error => {
|
246 |
+
console.error('Error:', error);
|
247 |
+
});
|
248 |
+
}
|
249 |
+
|
250 |
+
function sendMessage() {
|
251 |
+
const message = userInput.value.trim();
|
252 |
+
if (message) {
|
253 |
+
addMessage(message, true);
|
254 |
+
userInput.value = '';
|
255 |
+
fetch('/ask_followup', {
|
256 |
+
method: 'POST',
|
257 |
+
headers: {
|
258 |
+
'Content-Type': 'application/json'
|
259 |
+
},
|
260 |
+
body: JSON.stringify({ project_idea: currentProjectIdea, query: message })
|
261 |
+
})
|
262 |
+
.then(response => response.json())
|
263 |
+
.then(data => {
|
264 |
+
addMessage(data.response, false);
|
265 |
+
})
|
266 |
+
.catch(error => {
|
267 |
+
console.error('Error:', error);
|
268 |
+
});
|
269 |
+
}
|
270 |
+
}
|
271 |
+
|
272 |
+
userInput.addEventListener('keypress', function(e) {
|
273 |
+
if ( e.key === 'Enter') {
|
274 |
+
sendMessage();
|
275 |
+
}
|
276 |
+
});
|
277 |
+
|
278 |
+
addMessage("Welcome! Use the form above to generate a project idea, then feel free to ask follow-up questions.", false);
|
279 |
+
|
280 |
+
function goBack() {
|
281 |
+
window.history.back();
|
282 |
+
}
|
283 |
+
</script>
|
284 |
+
</body>
|
285 |
+
</html>
|
templates/student_quiz.html
ADDED
@@ -0,0 +1,443 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>SmartLearn - Quiz Generation</title>
|
7 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
8 |
+
<style>
|
9 |
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
|
10 |
+
|
11 |
+
body {
|
12 |
+
font-family: 'Poppins', sans-serif;
|
13 |
+
margin: 0;
|
14 |
+
padding: 0;
|
15 |
+
display: flex;
|
16 |
+
justify-content: center;
|
17 |
+
align-items: center;
|
18 |
+
min-height: 100vh;
|
19 |
+
background-image: url('../static/quiz.jpg');
|
20 |
+
background-size: cover;
|
21 |
+
background-position: center;
|
22 |
+
background-attachment: fixed;
|
23 |
+
}
|
24 |
+
|
25 |
+
.container {
|
26 |
+
border-radius: 20px;
|
27 |
+
padding: 40px;
|
28 |
+
width: 90%;
|
29 |
+
max-width: 500px;
|
30 |
+
text-align: center;
|
31 |
+
position: relative;
|
32 |
+
z-index: 2;
|
33 |
+
background: rgba(255, 255, 255, 0.1);
|
34 |
+
backdrop-filter: blur(10px);
|
35 |
+
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
36 |
+
border: 1px solid rgba(255, 255, 255, 0.18);
|
37 |
+
}
|
38 |
+
|
39 |
+
.quiz-form {
|
40 |
+
padding: 20px;
|
41 |
+
border-radius: 10px;
|
42 |
+
}
|
43 |
+
|
44 |
+
.form-group {
|
45 |
+
margin-bottom: 20px;
|
46 |
+
text-align: left;
|
47 |
+
}
|
48 |
+
|
49 |
+
.form-group label {
|
50 |
+
display: block;
|
51 |
+
margin-bottom: 5px;
|
52 |
+
color: #fff;
|
53 |
+
font-weight: 600;
|
54 |
+
}
|
55 |
+
|
56 |
+
.form-group input,
|
57 |
+
.form-group select {
|
58 |
+
width: 100%;
|
59 |
+
padding: 10px;
|
60 |
+
border: none;
|
61 |
+
border-radius: 5px;
|
62 |
+
background: rgba(255, 255, 255, 0.8);
|
63 |
+
color: #000;
|
64 |
+
font-size: 16px;
|
65 |
+
}
|
66 |
+
|
67 |
+
.form-group select {
|
68 |
+
appearance: none;
|
69 |
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
70 |
+
background-repeat: no-repeat;
|
71 |
+
background-position: right 10px center;
|
72 |
+
background-size: 20px;
|
73 |
+
}
|
74 |
+
|
75 |
+
.btn {
|
76 |
+
background-color: #3498db;
|
77 |
+
color: white;
|
78 |
+
border: none;
|
79 |
+
padding: 12px 24px;
|
80 |
+
border-radius: 30px;
|
81 |
+
cursor: pointer;
|
82 |
+
font-size: 18px;
|
83 |
+
transition: all 0.3s ease;
|
84 |
+
}
|
85 |
+
|
86 |
+
.btn:hover {
|
87 |
+
background-color: #2980b9;
|
88 |
+
transform: translateY(-2px);
|
89 |
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
90 |
+
}
|
91 |
+
|
92 |
+
h1, h2, h3 {
|
93 |
+
color: #fff;
|
94 |
+
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
95 |
+
}
|
96 |
+
|
97 |
+
.score-circle {
|
98 |
+
width: 150px;
|
99 |
+
height: 150px;
|
100 |
+
background-color: rgba(52, 152, 219, 0.8);
|
101 |
+
border-radius: 50%;
|
102 |
+
display: flex;
|
103 |
+
justify-content: center;
|
104 |
+
align-items: center;
|
105 |
+
margin: 0 auto 30px;
|
106 |
+
font-size: 36px;
|
107 |
+
font-weight: bold;
|
108 |
+
color: white;
|
109 |
+
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
|
110 |
+
}
|
111 |
+
|
112 |
+
.areas-to-improve {
|
113 |
+
background-color: rgba(248, 249, 250, 0.1);
|
114 |
+
border-radius: 10px;
|
115 |
+
padding: 20px;
|
116 |
+
text-align: left;
|
117 |
+
color: #fff;
|
118 |
+
}
|
119 |
+
|
120 |
+
.areas-to-improve ol {
|
121 |
+
padding-left: 20px;
|
122 |
+
}
|
123 |
+
|
124 |
+
.areas-to-improve li {
|
125 |
+
margin-bottom: 10px;
|
126 |
+
}
|
127 |
+
|
128 |
+
.validation-container {
|
129 |
+
display: none;
|
130 |
+
justify-content: center;
|
131 |
+
align-items: center;
|
132 |
+
flex-direction: column;
|
133 |
+
}
|
134 |
+
|
135 |
+
.loader {
|
136 |
+
border: 5px solid rgba(255, 255, 255, 0.3);
|
137 |
+
border-top: 5px solid #3498db;
|
138 |
+
border-radius: 50%;
|
139 |
+
width: 50px;
|
140 |
+
height: 50px;
|
141 |
+
animation: spin 1s linear infinite;
|
142 |
+
}
|
143 |
+
|
144 |
+
@keyframes spin {
|
145 |
+
0% { transform: rotate(0deg); }
|
146 |
+
100% { transform: rotate(360deg); }
|
147 |
+
}
|
148 |
+
|
149 |
+
.validation-text {
|
150 |
+
margin-top: 20px;
|
151 |
+
font-size: 18px;
|
152 |
+
color: #fff;
|
153 |
+
}
|
154 |
+
|
155 |
+
.correct { color: #2ecc71; }
|
156 |
+
.incorrect { color: #e74c3c; }
|
157 |
+
#areas-to-improve { margin-top: 20px; }
|
158 |
+
|
159 |
+
.options li {
|
160 |
+
display: flex;
|
161 |
+
align-items: center;
|
162 |
+
margin-bottom: 10px;
|
163 |
+
color: #fff;
|
164 |
+
}
|
165 |
+
|
166 |
+
.options li input {
|
167 |
+
margin-right: 10px;
|
168 |
+
}
|
169 |
+
|
170 |
+
.back-button {
|
171 |
+
position: absolute;
|
172 |
+
top: 20px;
|
173 |
+
left: 20px;
|
174 |
+
background-color: #6c757d;
|
175 |
+
color: white;
|
176 |
+
border: none;
|
177 |
+
padding: 10px 20px;
|
178 |
+
border-radius: 30px;
|
179 |
+
cursor: pointer;
|
180 |
+
transition: background-color 0.3s;
|
181 |
+
font-size: 16px;
|
182 |
+
}
|
183 |
+
|
184 |
+
.back-button:hover {
|
185 |
+
background-color: #5a6268;
|
186 |
+
}
|
187 |
+
|
188 |
+
.fade-in {
|
189 |
+
animation: fadeIn 0.5s ease-in-out;
|
190 |
+
}
|
191 |
+
|
192 |
+
@keyframes fadeIn {
|
193 |
+
from { opacity: 0; transform: translateY(20px); }
|
194 |
+
to { opacity: 1; transform: translateY(0); }
|
195 |
+
}
|
196 |
+
|
197 |
+
.icon {
|
198 |
+
margin-right: 10px;
|
199 |
+
}
|
200 |
+
|
201 |
+
.loading-animation {
|
202 |
+
display: flex;
|
203 |
+
flex-direction: column;
|
204 |
+
align-items: center;
|
205 |
+
justify-content: center;
|
206 |
+
margin-top: 20px;
|
207 |
+
}
|
208 |
+
|
209 |
+
.loading-animation p {
|
210 |
+
margin-top: 10px;
|
211 |
+
color: #fff;
|
212 |
+
font-weight: 600;
|
213 |
+
}
|
214 |
+
</style>
|
215 |
+
</head>
|
216 |
+
<body>
|
217 |
+
<div class="container fade-in">
|
218 |
+
<button class="back-button" onclick="goBack()"><i class="fas fa-arrow-left"></i> Back</button>
|
219 |
+
<h1><i class="fas fa-graduation-cap icon"></i>Generate Your Custom Quiz</h1>
|
220 |
+
<form class="quiz-form">
|
221 |
+
<div class="form-group">
|
222 |
+
<label for="subject"><i class="fas fa-book icon"></i>Subject:</label>
|
223 |
+
<input type="text" id="subject" name="subject" required>
|
224 |
+
</div>
|
225 |
+
<div class="form-group">
|
226 |
+
<label for="topic"><i class="fas fa-lightbulb icon"></i>Topic:</label>
|
227 |
+
<input type="text" id="topic" name="topic" required>
|
228 |
+
</div>
|
229 |
+
<div class="form-group">
|
230 |
+
<label for="num-questions"><i class="fas fa-list-ol icon"></i>Number of Questions:</label>
|
231 |
+
<select id="num-questions" name="num-questions">
|
232 |
+
<option value="5">5</option>
|
233 |
+
<option value="10">10</option>
|
234 |
+
<option value="15">15</option>
|
235 |
+
<option value="20">20</option>
|
236 |
+
</select>
|
237 |
+
</div>
|
238 |
+
<div class="form-group">
|
239 |
+
<label for="difficulty"><i class="fas fa-signal icon"></i>Difficulty Level:</label>
|
240 |
+
<select id="difficulty" name="difficulty">
|
241 |
+
<option value="easy">Easy</option>
|
242 |
+
<option value="medium">Medium</option>
|
243 |
+
<option value="hard">Hard</option>
|
244 |
+
</select>
|
245 |
+
</div>
|
246 |
+
<button type="submit" class="btn"><i class="fas fa-magic icon"></i>Generate Quiz</button>
|
247 |
+
</form>
|
248 |
+
|
249 |
+
<div id="loading-animation" class="loading-animation" style="display: none;">
|
250 |
+
<div class="loader"></div>
|
251 |
+
<p>Generating Quiz...</p>
|
252 |
+
</div>
|
253 |
+
|
254 |
+
<div id="quiz-result" class="quiz-result" style="display: none;">
|
255 |
+
<!-- Quiz questions will be dynamically inserted here -->
|
256 |
+
</div>
|
257 |
+
<div id="validation-container" class="validation-container">
|
258 |
+
<div id="loader" class="loader"></div>
|
259 |
+
<div id="validation-text" class="validation-text">Validating...</div>
|
260 |
+
</div>
|
261 |
+
<div id="quiz-score" style="display: none;"></div>
|
262 |
+
<div id="areas-to-improve" class="areas-to-improve" style="display: none;"></div>
|
263 |
+
</div>
|
264 |
+
|
265 |
+
|
266 |
+
<script>
|
267 |
+
let quizData = [];
|
268 |
+
let studentId = ''; // Assume you set this variable with the logged-in student's ID.
|
269 |
+
|
270 |
+
document.querySelector('.quiz-form').addEventListener('submit', function(e) {
|
271 |
+
e.preventDefault();
|
272 |
+
const formData = new FormData(this);
|
273 |
+
const data = {
|
274 |
+
subject: formData.get('subject'),
|
275 |
+
topic: formData.get('topic'),
|
276 |
+
'num-questions': formData.get('num-questions'),
|
277 |
+
difficulty: formData.get('difficulty')
|
278 |
+
};
|
279 |
+
fetch('/generate_quiz', {
|
280 |
+
method: 'POST',
|
281 |
+
headers: {
|
282 |
+
'Content-Type': 'application/json',
|
283 |
+
},
|
284 |
+
body: JSON.stringify(data)
|
285 |
+
})
|
286 |
+
.then(response => response.json())
|
287 |
+
.then(data => {
|
288 |
+
quizData = parseQuizData(data.quiz);
|
289 |
+
showQuiz(quizData);
|
290 |
+
})
|
291 |
+
.catch(error => console.error('Error:', error));
|
292 |
+
});
|
293 |
+
|
294 |
+
function parseQuizData(quizString) {
|
295 |
+
const questions = quizString.split('Question:').filter(q => q.trim() !== '');
|
296 |
+
return questions.map((question, index) => {
|
297 |
+
const [questionText, ...options] = question.split('\n').filter(line => line.trim() !== '');
|
298 |
+
const answerLine = options.pop();
|
299 |
+
const correctAnswer = parseInt(answerLine.split(':')[1].trim());
|
300 |
+
return {
|
301 |
+
id: index + 1,
|
302 |
+
text: questionText.trim(),
|
303 |
+
options: options.map(opt => opt.replace('<<o>>', '').trim()),
|
304 |
+
correctAnswer: correctAnswer,
|
305 |
+
concept: questionText.match(/\[(.*?)\]/)[1]
|
306 |
+
};
|
307 |
+
});
|
308 |
+
}
|
309 |
+
|
310 |
+
function showQuiz(questions) {
|
311 |
+
const quizResult = document.getElementById('quiz-result');
|
312 |
+
let quizHtml = '<h2>Your Custom Quiz</h2>';
|
313 |
+
|
314 |
+
questions.forEach((question, index) => {
|
315 |
+
quizHtml += `
|
316 |
+
<div class="question fade-in">
|
317 |
+
<h3>${question.id}. ${question.text}</h3>
|
318 |
+
<ul class="options">
|
319 |
+
`;
|
320 |
+
|
321 |
+
question.options.forEach((option, optionIndex) => {
|
322 |
+
quizHtml += `
|
323 |
+
<li>
|
324 |
+
<input type="radio" name="q${index}" value="${optionIndex + 1}" id="q${index}o${optionIndex}">
|
325 |
+
<label for="q${index}o${optionIndex}">${option}</label>
|
326 |
+
</li>
|
327 |
+
`;
|
328 |
+
});
|
329 |
+
|
330 |
+
quizHtml += `
|
331 |
+
</ul>
|
332 |
+
</div>
|
333 |
+
`;
|
334 |
+
});
|
335 |
+
|
336 |
+
quizHtml += '<button onclick="submitQuiz()" class="btn">Submit Quiz</button>';
|
337 |
+
|
338 |
+
quizResult.innerHTML = quizHtml;
|
339 |
+
quizResult.style.display = 'block';
|
340 |
+
}
|
341 |
+
|
342 |
+
function submitQuiz() {
|
343 |
+
const validationContainer = document.getElementById('validation-container');
|
344 |
+
const quizResult = document.getElementById('quiz-result');
|
345 |
+
const quizScore = document.getElementById('quiz-score');
|
346 |
+
const areasToImprove = document.getElementById('areas-to-improve');
|
347 |
+
|
348 |
+
quizResult.style.display = 'none';
|
349 |
+
validationContainer.style.display = 'block';
|
350 |
+
|
351 |
+
setTimeout(() => {
|
352 |
+
validationContainer.style.display = 'none';
|
353 |
+
const score = calculateScore();
|
354 |
+
displayResults(score);
|
355 |
+
|
356 |
+
// Get areas to improve
|
357 |
+
let improveAreas = [];
|
358 |
+
let incorrectQuestions = quizData.filter((question, index) => {
|
359 |
+
const selectedAnswer = document.querySelector(`input[name="q${index}"]:checked`);
|
360 |
+
return !selectedAnswer || parseInt(selectedAnswer.value) !== question.correctAnswer;
|
361 |
+
});
|
362 |
+
|
363 |
+
if (incorrectQuestions.length > 0) {
|
364 |
+
improveAreas = incorrectQuestions.map(question => question.concept);
|
365 |
+
}
|
366 |
+
|
367 |
+
// Ensure studentId is set correctly
|
368 |
+
const studentId = '[email protected]'; // Replace with actual student ID
|
369 |
+
|
370 |
+
// Send areas to improve to the backend
|
371 |
+
fetch('/update_student_areas', {
|
372 |
+
method: 'POST',
|
373 |
+
headers: {
|
374 |
+
'Content-Type': 'application/json',
|
375 |
+
},
|
376 |
+
body: JSON.stringify({ student_id: studentId, areas_to_improve: improveAreas })
|
377 |
+
})
|
378 |
+
.then(response => response.json())
|
379 |
+
.then(data => {
|
380 |
+
if (data.status === 'success') {
|
381 |
+
console.log('Student areas to improve updated successfully.');
|
382 |
+
} else {
|
383 |
+
console.error('Failed to update student areas to improve.');
|
384 |
+
}
|
385 |
+
})
|
386 |
+
.catch(error => console.error('Error:', error));
|
387 |
+
|
388 |
+
}, 2000);
|
389 |
+
}
|
390 |
+
|
391 |
+
|
392 |
+
function calculateScore() {
|
393 |
+
let score = 0;
|
394 |
+
quizData.forEach((question, index) => {
|
395 |
+
const selectedAnswer = document.querySelector(`input[name="q${index}"]:checked`);
|
396 |
+
if (selectedAnswer && parseInt(selectedAnswer.value) === question.correctAnswer) {
|
397 |
+
score++;
|
398 |
+
}
|
399 |
+
});
|
400 |
+
return score;
|
401 |
+
}
|
402 |
+
|
403 |
+
function displayResults(score) {
|
404 |
+
const quizScore = document.getElementById('quiz-score');
|
405 |
+
const areasToImprove = document.getElementById('areas-to-improve');
|
406 |
+
|
407 |
+
quizScore.innerHTML = `
|
408 |
+
<div class="score-circle">${score}/${quizData.length}</div>
|
409 |
+
<h3>You have scored</h3>
|
410 |
+
<p>Performance: ${getPerformanceEvaluation(score, quizData.length)}</p>
|
411 |
+
`;
|
412 |
+
quizScore.style.display = 'block';
|
413 |
+
|
414 |
+
let incorrectQuestions = quizData.filter((question, index) => {
|
415 |
+
const selectedAnswer = document.querySelector(`input[name="q${index}"]:checked`);
|
416 |
+
return !selectedAnswer || parseInt(selectedAnswer.value) !== question.correctAnswer;
|
417 |
+
});
|
418 |
+
|
419 |
+
if (incorrectQuestions.length > 0) {
|
420 |
+
let improveHtml = '<h3>Areas to be improved</h3><ol>';
|
421 |
+
incorrectQuestions.forEach(question => {
|
422 |
+
improveHtml += `<li>${question.concept}</li>`;
|
423 |
+
});
|
424 |
+
improveHtml += '</ol>';
|
425 |
+
areasToImprove.innerHTML = improveHtml;
|
426 |
+
areasToImprove.style.display = 'block';
|
427 |
+
}
|
428 |
+
}
|
429 |
+
|
430 |
+
function getPerformanceEvaluation(score, total) {
|
431 |
+
const percentage = (score / total) * 100;
|
432 |
+
if (percentage >= 80) return 'Excellent';
|
433 |
+
if (percentage >= 60) return 'Good';
|
434 |
+
if (percentage >= 40) return 'Average';
|
435 |
+
return 'Needs Improvement';
|
436 |
+
}
|
437 |
+
|
438 |
+
function goBack() {
|
439 |
+
window.history.back();
|
440 |
+
}
|
441 |
+
</script>
|
442 |
+
</body>
|
443 |
+
</html>
|
templates/student_reward_points.html
ADDED
@@ -0,0 +1,163 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Learning Journey Rewards Map</title>
|
7 |
+
<style>
|
8 |
+
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
|
9 |
+
|
10 |
+
body {
|
11 |
+
font-family: 'Indie Flower', cursive;
|
12 |
+
background-color: #f0e6d2;
|
13 |
+
margin: 0;
|
14 |
+
padding: 0;
|
15 |
+
display: flex;
|
16 |
+
justify-content: center;
|
17 |
+
align-items: center;
|
18 |
+
min-height: 100vh;
|
19 |
+
overflow-x: auto;
|
20 |
+
}
|
21 |
+
|
22 |
+
.container {
|
23 |
+
background-color: #fff9e6;
|
24 |
+
border-radius: 20px;
|
25 |
+
box-shadow: 0 0 20px rgba(0,0,0,0.1);
|
26 |
+
padding: 30px;
|
27 |
+
width: 1200px;
|
28 |
+
max-width: 95%;
|
29 |
+
position: relative;
|
30 |
+
}
|
31 |
+
|
32 |
+
h1 {
|
33 |
+
color: #4a4a4a;
|
34 |
+
text-align: center;
|
35 |
+
font-size: 2.5em;
|
36 |
+
margin-bottom: 30px;
|
37 |
+
}
|
38 |
+
|
39 |
+
#rewardsMap {
|
40 |
+
width: 100%;
|
41 |
+
height: 500px;
|
42 |
+
}
|
43 |
+
|
44 |
+
.node {
|
45 |
+
cursor: pointer;
|
46 |
+
transition: transform 0.3s ease;
|
47 |
+
}
|
48 |
+
|
49 |
+
.node:hover {
|
50 |
+
transform: scale(1.1);
|
51 |
+
}
|
52 |
+
|
53 |
+
.reward-info {
|
54 |
+
position: absolute;
|
55 |
+
font-size: 0.9em;
|
56 |
+
text-align: center;
|
57 |
+
width: 120px;
|
58 |
+
}
|
59 |
+
|
60 |
+
.reward-info img {
|
61 |
+
width: 80px;
|
62 |
+
height: 80px;
|
63 |
+
object-fit: cover;
|
64 |
+
border-radius: 50%;
|
65 |
+
margin-bottom: 5px;
|
66 |
+
}
|
67 |
+
|
68 |
+
.current-points {
|
69 |
+
text-align: center;
|
70 |
+
font-size: 1.5em;
|
71 |
+
color: #3498db;
|
72 |
+
margin-bottom: 20px;
|
73 |
+
}
|
74 |
+
|
75 |
+
#currentPointMarker {
|
76 |
+
fill: #ff6b6b;
|
77 |
+
}
|
78 |
+
</style>
|
79 |
+
</head>
|
80 |
+
<body>
|
81 |
+
<div class="container">
|
82 |
+
<h1>Your Learning Journey Rewards Map</h1>
|
83 |
+
<div class="current-points">Your Current Points: <span id="points">1500</span></div>
|
84 |
+
<svg id="rewardsMap" viewBox="0 0 1000 400"></svg>
|
85 |
+
</div>
|
86 |
+
|
87 |
+
<script>
|
88 |
+
const svg = document.getElementById('rewardsMap');
|
89 |
+
const currentPoints = 1500;
|
90 |
+
|
91 |
+
const rewards = [
|
92 |
+
{ points: 1000, x: 100, y: 150, reward: "70% off headphones", image: "data:image/jpeg;base64,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" },
|
93 |
+
{ points: 2000, x: 300, y: 250, reward: "Free e-book(comics,anime)", image: "data:image/jpeg;base64,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" },
|
94 |
+
{ points: 4000, x: 500, y: 150, reward: "50% off course", image: "data:image/png;base64,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" },
|
95 |
+
{ points: 6000, x: 700, y: 250, reward: "80% off on earbuds", image: "data:image/jpeg;base64,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" },
|
96 |
+
{ points: 8000, x: 900, y: 150, reward: "15% off laptop", image: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxITEBAPDxAQFRUVFRgSFhUVGBIWGBUYFRcWFhUVFhUYHyggGBolGxcVITEhJSorLjEuFx8zODMsNygtLisBCgoKDg0OGhAQGi0lHyUtLTArLS0tLS0rLSstLSstKy0tKy0tLSsrNSstLS0tKy0tKzcrLS0tLSsrLS03LS0rLf/AABEIAKgBKwMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAABQIDBgcIBAH/xABMEAACAQICBAUOCwYFBQAAAAAAAQIDEQQhBRIxUQZBYXHRCBMXIlRVdIGRk6GxwdIUMjQ1NnOSo7PD8BVCUlNi4QcjJDPxJkNkgqL/xAAYAQEAAwEAAAAAAAAAAAAAAAAAAQIDBP/EACIRAQEAAgIDAAMAAwAAAAAAAAABAhESMQMTIUFRYQQUIv/aAAwDAQACEQMRAD8A3iAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGr+qC0nWo6Ooxo1JQ67XUJuLabioTlq3XFdLyAbPuLnK2ieA+PxFCniKeJpKNSOslKpWTtszSg16T2djfSXdVDztf3C3Go5R07cXOYuxvpLuqh52v7g7G2ku6qHna/uDhl+kco6duLnMfY10l3VQ87iPcHY10l3VQ87iPcHGnKOnLi5zJ2NdJd1UPO4j3B2NNJd1UPO4j3BxqeUdN3FzmTsaaS7qoedxHuDsaaS7qoedxHuDjTlHTdxc5k7Gmku6qHncR7g7Guku6qHncR7g405R03cXOY+xrpLuqh53Ee4fOxtpLuqh53Ee4OFRyjp24ucxdjfSXdVDztf3B2N9Jd1UPO1/cHDL9HKOnbn25zB2N9Jd1UPO1/cPR/hjXxWF0/Rwcq8mnOdKrFSnKE11uUllLc0nexFxs7TLK6XABCQAAAAAAAAAAAAAAAAAAAAANSdUf8gwnhP5VQ22ak6o/wCQYTwn8qoBa4CfNuD+r9rJ4geAfzbg/q/azIEjqnTnvb4kVJH1IqSGx8SPqiVqJUokbTpRqn3VK1Eq1SNp0tao1T2U8Nxyy5OP+xeVRR+KkvS/KFphtGOJ8cSUeIk9qvzpM81WMXsWq/R/YlN8bxNFLRflEoaG2elpopLrRQ0WQoNYcHfpbT8In+DI2gzV/B36W0/CJ/gyM/L0v4+3SQAMGoAAAAAAAAAAAAAAAAAAAAAGpOqP+QYTwn8qobbNSdUf8gwnhP5VQC3wC+bcH9X7WZCkQHAH5twf1ftZkMUdM6YXt9SK0gkVpEJEiuMdxVCK4yiviLRuskJLV5iuxovk8qL8IJbM3v6CzhM1dbHnfenssK1T/hDX0+RcnUXP+vSWXV4tnNY8tWVTigyOxGNlF2kmnymmOGzml+ufGTtdZ24y1RxClezvx2IqrpNueGlHa5Om+W1mvQ35CM4NY52rOX7qklz/ABV6bF/X8TM2VPbbxo+NFulL/b5kX2jG/Krl2stFDReki20IotNGruDv0th4RP8ABkbTaNWcHfpbDwif4Mink6Ww7dIgAxagAAAAAAAAAAAAAAAAAAAAAak6o/5BhPCfyqhts1J1R/yDCeE/lVAPnAH5twf1ftZkUUY9wA+bcH9X7WZHE6J0xvaqKLypO10W4o9FCW2PjXtQWxWI03rJbG9zfOehYGOspSbvsexKXOuM+2S7Z7SxiMUlx2J3b0ta9UpxirRSSXFkl5CNxukHHisROO0jC9uu251l6Cxo/ES6+6FZXjODa407WalFrkvma4+PU3WVy/D0VtNPeeTHaQdajK0bypuMrrbaT1WvHdPxEHpWhOOI6xTvJyfa7/Hzbyfwajh6epdOTznLfLcuRG2WOOMlnaktvb14TDxp0qanbWjebe6UlZ+h2ITB0FG0djnLXa3Rzav6X5C7pHSygryzbyjBbZN7MjzaP1m3KbvJvtrcT4oLm4/IRjvurWsqwMtaV+JK/sR72j5o3AyjBfxPN9HiL1Si1uOTK7rR55ItyRdkW5CKrUkaq4PfS2HhE/wZG1pGqeD30uh4RP8ABkV8nS2HbpEAGLQAAAAAAAAAAAAAAAAAAAAADUnVH/IMJ4T+VUNtmpOqP+QYTwn8qoB94AfNmD+q9rMjiY5wA+bMH9X7WZFE6J0x/K/R28WeWZau03fJ8h9lNJXZ5a2K1ryeXtEWi5VqviITSWu8lOF3xa1n5CzpbSErNRdlyGH6RUrObTtvOnx4XtnnlHp0zr03aorE3wdxT61hp1P3ZVFGT44qN9u5Xt4iD0tOrU0bGpUi24SspbXquyWtyvWX2WyY4PaIUdHx65dy1pVLblPUbjzWpq/O95rnl/z9Z4z78erE41Rcqlu3mtuzVj/CnxXtm+K3NeEqaWlO/WUpWydSXa04cms/7s83DGbU6abWolZQ7Za745TazaS1FbK9s2Y9WxutbXl2qyjHJRW5Rgu1XpK4zf1Nuvido1lraym5ye2q8suNUY/ur+t5ma8G8NCEVXrWSXxY7uW2/cjXmj8Uk1OXFmlvfj/SMswMpzSq1ZKEFmnLJJcbintfKTnj80Y1luI025ZRWrHdx88ugUMbD/kgsJjqGfW6c6n9Uu1T8ufoK6uLpt50pU3vjLWXjVllzHPwn6aysk11tR8keXCS7Q9TMrFsluRqng99LoeET/BkbWkap4PfS6HhE/wZFPJ0YdukAAZNAAAAAAAAAAAAAAAAAAAAAANSdUf8gwnhP5VQ22al6o1f6DCeE/lVAPnAD5twf1ftZkcWY3wB+bcH9X7WZFFnROmN7RWlMS1Nx3WXiav6zzTrtoldIYJVFdfGWzc1uZAzi43TTVsnfauc0x0m34j8XO8op8bS8rMqr6Jw7o9bqyjFtZb8+TcYbpVNZrnKtIaSnKPXYyactRtrlvFq/I7LxGuUt1qqY2fdprRGEtSr4aq4y1m2nHY0slbc7Zcly5g52g6b3OL9V/IR2jcS3Z3z3svzq/5l9/rI7t2trUliA4baOqVaGvQV6lN31bXbWySXLsfiMH0RourN681Ntbbp5eLiNoVcVqzu9j9ewiuENahOK6+8Wo7XGkm4z5G7P1oT5dq1EaDo68m4Ri9XNzlZ06aXG+Kcv/lf1bTJcLgamJlaOs4J5zle82uPkjuX6UNg8c56sKGFl1pWajU7WN1xyhDOT55syjD4mu4pTmor+GmlBLyZ+Vl8sqpIlqWjaNGP+bUiudpegi8e4SlGVCanB37ZbE1xEZpCaqPUpST1m1Kaz1VHKSvvvl5SX0dg3NRp08oR2sy6+2tElom7b3Ky8f8AYk5FFGioRUYn2TMrd1NqmRqrg99LYeET/BkbTkzVvB1f9Wwf/kT/AAZFPJ0th26PABi0AAAAAAAAAAAAAAAAAAAAAA1R1RC/0WD8J/KqG1zV3+PuGnUweEjTi5NYjWaW1LrVRX5rteUCP4D4iEdHYSLnBNU7Wcop7XxE8sZT/mU/tR6TQX7ExDzWGqPlsuI+LQGJzawlR222jsvkr7jT2fxTg6BWNp/zaf2o9JYx3WqiuqtNSWx60c+R57DQq0DiXe2EqOyu7RvZb3ycojoHEvJYSq3tso32ZseynBtHSjg4y7eF1xa0eZmPyq2pN60bXlG11/FSknzX1/KYfDQeJbSWFqtvYlG7fMkFoXEtpLDVbvJWjm3uRrP8m61pX1/e2xtHYmKS7ePlR69I4iCldThtv8Zceb9foNW/sXE7Hhqu74voEtB4lNp4WqmsmnGzXOuIj33e9Lcfmmc6a0haMpU9SbjnKF120Gs7cq6THMFV65J/6jEU1fKLk7cylF5+NEVLQmKTs8NVT3ONnnmshLQuKW3DVVdXV42unsa5Cf8AY/iPX/Wc4CEYr/elLnm/axicfPr8acakFBQ15PJu7vZXfMYNLQmKVr4Wrnmrx28V1vD0Jikk3hatnserk7bbPjI99/R62yNFqDcKUZQUVlnKOdtt36+UzfC1aMIqMalP7Uek0A9B4m13hatr2vq5X3X3nz9g4m1/glW2y+rld7Fcrl5rfwmYOgnjaf8ANp/aj0lDxlP+bT+1HpNALQGJabWEq2W16uSvkrviEdAYl3thKrsru0b2W97kV9n8ODfjxlP+ZT+1HpNb8HLPhTSkmmniZ5rP/sTMMWgcT3LU+yjJv8MtHVYaXwM50pRjGpK7dkl/l1I5+NpEZZ7Tjjp00ACiwAAAAAAAAAAAAAAAAAAAB8YFjFYpQXL+tphnCW9VNXV+X2Hj0hpjHQq1IfAcTVipPVnGErNcTyieOelsY9uicV9mp0ARMtHtZdqW/wBn53er4rr0kpLGYh7dD4ryVugp+EV+82K8lboJ2hGSwF9uq/1vQqYK+6255+mxJ/CK/ebFeSt0Dr9bvNivv+gncERPB2XFlvz9ZQsMrWy/XIyZdWtx6FxX3/QfNer3kxP3/QNwQ6wyWz9eILDR/WXqJjXq95MT9/0DXq95MT9/0DYhnhl+svUfHhluRM61TvJivv8AoGtU7yYr7/oI2Id4Zcnr9I+DLZl6/WTGtU7yYr7/AKD7r1e8mJ+/6BsRMMKr2VvGXY4Dda+/+ysSKqVe8uJ8lfoKvhFbvNivv+gncEatH83iy9RUsBxvVvt3Eh8Ir95sV5K3QPhNfvNivJW6BuDwLBO/7vpJTQeBcJ6/a28foLSxWI7z4ryVuguw0lils0Rivs1egjY2Fo7H5JSfjJRGr46dxy2aLxS/9J+6Z1wXqVZYaEsRGUZu7cZJxcdytYhKWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//Z" }
|
97 |
+
];
|
98 |
+
|
99 |
+
// Create the curved path using Bezier curves
|
100 |
+
const pathData = `M50,200
|
101 |
+
C150,100 250,300 350,200
|
102 |
+
S550,100 650,200
|
103 |
+
S850,300 950,200`;
|
104 |
+
|
105 |
+
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
106 |
+
path.setAttribute("d", pathData);
|
107 |
+
path.setAttribute("fill", "none");
|
108 |
+
path.setAttribute("stroke", "#4a4a4a");
|
109 |
+
path.setAttribute("stroke-width", "3");
|
110 |
+
path.setAttribute("stroke-dasharray", "5,5");
|
111 |
+
svg.appendChild(path);
|
112 |
+
|
113 |
+
// Create nodes, labels, and reward info
|
114 |
+
rewards.forEach((reward, index) => {
|
115 |
+
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
|
116 |
+
circle.setAttribute("cx", reward.x);
|
117 |
+
circle.setAttribute("cy", reward.y);
|
118 |
+
circle.setAttribute("r", "30");
|
119 |
+
circle.setAttribute("fill", currentPoints >= reward.points ? "#2ecc71" : "#3498db");
|
120 |
+
circle.classList.add("node");
|
121 |
+
svg.appendChild(circle);
|
122 |
+
|
123 |
+
const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
124 |
+
text.setAttribute("x", reward.x);
|
125 |
+
text.setAttribute("y", reward.y + 5);
|
126 |
+
text.setAttribute("text-anchor", "middle");
|
127 |
+
text.setAttribute("dominant-baseline", "middle");
|
128 |
+
text.setAttribute("fill", "white");
|
129 |
+
text.textContent = `${reward.points}`;
|
130 |
+
svg.appendChild(text);
|
131 |
+
|
132 |
+
const foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
|
133 |
+
foreignObject.setAttribute("x", reward.x - 60);
|
134 |
+
foreignObject.setAttribute("y", reward.y + 40);
|
135 |
+
foreignObject.setAttribute("width", "120");
|
136 |
+
foreignObject.setAttribute("height", "150");
|
137 |
+
|
138 |
+
const rewardInfo = document.createElement("div");
|
139 |
+
rewardInfo.className = "reward-info";
|
140 |
+
rewardInfo.innerHTML = `
|
141 |
+
<img src="${reward.image}" alt="${reward.reward}">
|
142 |
+
<p>${reward.reward}</p>
|
143 |
+
`;
|
144 |
+
foreignObject.appendChild(rewardInfo);
|
145 |
+
svg.appendChild(foreignObject);
|
146 |
+
});
|
147 |
+
|
148 |
+
// Create current point marker
|
149 |
+
const currentX = 50 + (currentPoints / 8000) * 900; // Scale to fit the path
|
150 |
+
const currentMarker = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
|
151 |
+
currentMarker.setAttribute("points", `${currentX},150 ${currentX-10},170 ${currentX+10},170`);
|
152 |
+
currentMarker.id = "currentPointMarker";
|
153 |
+
svg.appendChild(currentMarker);
|
154 |
+
|
155 |
+
const currentText = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
156 |
+
currentText.setAttribute("x", currentX);
|
157 |
+
currentText.setAttribute("y", 140);
|
158 |
+
currentText.setAttribute("text-anchor", "middle");
|
159 |
+
currentText.textContent = "You are here";
|
160 |
+
svg.appendChild(currentText);
|
161 |
+
</script>
|
162 |
+
</body>
|
163 |
+
</html>
|
templates/student_speakai.html
ADDED
@@ -0,0 +1,354 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>SmartLearn - AI Voice Chat</title>
|
7 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
8 |
+
<style>
|
9 |
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
|
10 |
+
|
11 |
+
:root {
|
12 |
+
--primary-color: #4e54c8;
|
13 |
+
--secondary-color: #8f94fb;
|
14 |
+
--accent-color: #ff6b6b;
|
15 |
+
--text-color: #333;
|
16 |
+
--bg-color: rgba(255, 255, 255, 0.8);
|
17 |
+
}
|
18 |
+
|
19 |
+
body {
|
20 |
+
font-family: 'Poppins', sans-serif;
|
21 |
+
margin: 0;
|
22 |
+
padding: 0;
|
23 |
+
line-height: 1.6;
|
24 |
+
overflow: hidden;
|
25 |
+
position: relative;
|
26 |
+
}
|
27 |
+
|
28 |
+
video {
|
29 |
+
position: absolute;
|
30 |
+
top: 50%;
|
31 |
+
left: 50%;
|
32 |
+
min-width: 100%;
|
33 |
+
min-height: 100%;
|
34 |
+
width: auto;
|
35 |
+
height: auto;
|
36 |
+
z-index: -1;
|
37 |
+
transform: translateX(-50%) translateY(-50%);
|
38 |
+
background-size: cover;
|
39 |
+
transition: 1s opacity;
|
40 |
+
}
|
41 |
+
|
42 |
+
.container {
|
43 |
+
max-width: 800px;
|
44 |
+
margin: 0 auto;
|
45 |
+
padding: 20px;
|
46 |
+
background-color: var(--bg-color);
|
47 |
+
border-radius: 10px;
|
48 |
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
49 |
+
display: flex;
|
50 |
+
flex-direction: column;
|
51 |
+
align-items: center;
|
52 |
+
}
|
53 |
+
|
54 |
+
header {
|
55 |
+
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
56 |
+
padding: 15px 0;
|
57 |
+
position: sticky;
|
58 |
+
top: 0;
|
59 |
+
z-index: 1000;
|
60 |
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
61 |
+
text-align: center;
|
62 |
+
}
|
63 |
+
|
64 |
+
.header-content {
|
65 |
+
display: flex;
|
66 |
+
justify-content: center;
|
67 |
+
align-items: center;
|
68 |
+
max-width: 1200px;
|
69 |
+
margin: 0 auto;
|
70 |
+
padding: 0 20px;
|
71 |
+
}
|
72 |
+
|
73 |
+
.logo {
|
74 |
+
font-size: 28px;
|
75 |
+
font-weight: 700;
|
76 |
+
color: #fff;
|
77 |
+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
78 |
+
display: flex;
|
79 |
+
align-items: center;
|
80 |
+
}
|
81 |
+
|
82 |
+
.logo img {
|
83 |
+
height: 40px;
|
84 |
+
margin-right: 10px;
|
85 |
+
}
|
86 |
+
|
87 |
+
.nav-bar {
|
88 |
+
background-color: #fff;
|
89 |
+
padding: 10px 0;
|
90 |
+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
91 |
+
}
|
92 |
+
|
93 |
+
.nav-bar ul {
|
94 |
+
list-style-type: none;
|
95 |
+
margin: 0;
|
96 |
+
padding: 0;
|
97 |
+
display: flex;
|
98 |
+
justify-content: center;
|
99 |
+
align-items: center;
|
100 |
+
}
|
101 |
+
|
102 |
+
.nav-bar li {
|
103 |
+
margin: 0 10px;
|
104 |
+
}
|
105 |
+
|
106 |
+
.nav-bar a {
|
107 |
+
text-decoration: none;
|
108 |
+
color: var(--text-color);
|
109 |
+
font-weight: 600;
|
110 |
+
transition: all 0.3s ease;
|
111 |
+
display: flex;
|
112 |
+
align-items: center;
|
113 |
+
}
|
114 |
+
|
115 |
+
.nav-bar a img {
|
116 |
+
height: 24px;
|
117 |
+
margin-right: 5px;
|
118 |
+
}
|
119 |
+
|
120 |
+
.nav-bar a:hover {
|
121 |
+
color: var(--primary-color);
|
122 |
+
}
|
123 |
+
|
124 |
+
h1 {
|
125 |
+
color: #fff;
|
126 |
+
margin: 0;
|
127 |
+
}
|
128 |
+
|
129 |
+
#chat-log {
|
130 |
+
width: 100%;
|
131 |
+
height: 400px;
|
132 |
+
border: 1px solid #ccc;
|
133 |
+
border-radius: 10px;
|
134 |
+
overflow-y: scroll;
|
135 |
+
padding: 20px;
|
136 |
+
margin-bottom: 20px;
|
137 |
+
background-color: #fff;
|
138 |
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
139 |
+
}
|
140 |
+
|
141 |
+
#user-input {
|
142 |
+
width: 100%;
|
143 |
+
padding: 15px;
|
144 |
+
margin-bottom: 15px;
|
145 |
+
border: 1px solid #ccc;
|
146 |
+
border-radius: 5px;
|
147 |
+
font-size: 16px;
|
148 |
+
}
|
149 |
+
|
150 |
+
.button-group {
|
151 |
+
width: 100%;
|
152 |
+
display: flex;
|
153 |
+
justify-content: space-between;
|
154 |
+
}
|
155 |
+
|
156 |
+
button {
|
157 |
+
padding: 12px 25px;
|
158 |
+
border: none;
|
159 |
+
border-radius: 5px;
|
160 |
+
cursor: pointer;
|
161 |
+
font-weight: 600;
|
162 |
+
transition: all 0.3s ease;
|
163 |
+
}
|
164 |
+
|
165 |
+
#start-voice {
|
166 |
+
background-color: var(--primary-color);
|
167 |
+
color: #fff;
|
168 |
+
}
|
169 |
+
|
170 |
+
#send-text {
|
171 |
+
background-color: var(--accent-color);
|
172 |
+
color: #fff;
|
173 |
+
}
|
174 |
+
|
175 |
+
button:hover {
|
176 |
+
transform: translateY(-3px);
|
177 |
+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
178 |
+
}
|
179 |
+
|
180 |
+
.message {
|
181 |
+
margin-bottom: 15px;
|
182 |
+
padding: 10px 15px;
|
183 |
+
border-radius: 10px;
|
184 |
+
max-width: 80%;
|
185 |
+
}
|
186 |
+
|
187 |
+
.user-message {
|
188 |
+
background-color: #e6f3ff;
|
189 |
+
align-self: flex-end;
|
190 |
+
margin-left: auto;
|
191 |
+
}
|
192 |
+
|
193 |
+
.ai-message {
|
194 |
+
background-color: #f0f0f0;
|
195 |
+
align-self: flex-start;
|
196 |
+
}
|
197 |
+
|
198 |
+
#listening-indicator {
|
199 |
+
display: none;
|
200 |
+
color: var(--primary-color);
|
201 |
+
font-weight: bold;
|
202 |
+
text-align: center;
|
203 |
+
margin-top: 10px;
|
204 |
+
}
|
205 |
+
|
206 |
+
.pulse {
|
207 |
+
animation: pulse 1.5s infinite;
|
208 |
+
}
|
209 |
+
|
210 |
+
@keyframes pulse {
|
211 |
+
0% {
|
212 |
+
opacity: 0.5;
|
213 |
+
}
|
214 |
+
50% {
|
215 |
+
opacity: 1;
|
216 |
+
}
|
217 |
+
100% {
|
218 |
+
opacity: 0.5;
|
219 |
+
}
|
220 |
+
}
|
221 |
+
</style>
|
222 |
+
</head>
|
223 |
+
<body>
|
224 |
+
<video autoplay muted loop id="bg-video">
|
225 |
+
<source src="../static/Voice-chat.mp4" type="video/mp4">
|
226 |
+
Your browser does not support HTML5 video.
|
227 |
+
</video>
|
228 |
+
|
229 |
+
<header>
|
230 |
+
<div class="header-content">
|
231 |
+
<div class="logo"><img src="../static/smart-learn.jpeg" alt="" style="text-align: left;">SmartLearn </div>
|
232 |
+
|
233 |
+
<h1>AI Voice Chat</h1></div>
|
234 |
+
<nav class="nav-bar">
|
235 |
+
<ul>
|
236 |
+
<li><a href="{{ url_for('student') }}"><img src="https://cdn-icons-png.flaticon.com/512/1946/1946488.png" alt="Home">Home</a></li>
|
237 |
+
<li><a href="{{ url_for('student') }}#ai-powered-tools"><img src="https://www.kalupurbank.com/wp-content/uploads/2023/02/robot-chatbot-icon-sign-free-vector.webp" alt="Home">Ai Tools</a></li>
|
238 |
+
<li><a href="{{ url_for('homework') }}"><img src="https://cdn-icons-png.flaticon.com/512/1828/1828919.png" alt="Homework">Homework</a></li>
|
239 |
+
<li><a href="{{ url_for('student_courses') }}"><img src="https://cdn-icons-png.flaticon.com/512/1048/1048953.png" alt="Courses">Courses</a></li>
|
240 |
+
<li><a href="{{ url_for('speak') }}"><img src="https://cdn-icons-png.flaticon.com/512/4712/4712026.png" alt="Speak With AI">Speak With AI</a></li>
|
241 |
+
<li><a href="{{ url_for('summarise_video') }}"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/1280px-YouTube_full-color_icon_%282017%29.svg.png" alt="Ssummarise_video">summarise_video</a></li>
|
242 |
+
</ul>
|
243 |
+
</nav>
|
244 |
+
</header>
|
245 |
+
|
246 |
+
<div class="container">
|
247 |
+
<div id="chat-log">
|
248 |
+
<div class="message ai-message"><strong>AI:</strong> I'm a speaking Assistant, interact with me to enhance your speaking skills.</div>
|
249 |
+
</div>
|
250 |
+
<textarea id="user-input" rows="3" placeholder="Type your message here or click 'Start Voice Input' to speak..."></textarea>
|
251 |
+
<div class="button-group">
|
252 |
+
<button id="start-voice"><i class="fas fa-microphone"></i> Start Voice Input</button>
|
253 |
+
<button id="send-text"><i class="fas fa-paper-plane"></i> Send Text</button>
|
254 |
+
</div>
|
255 |
+
<div id="listening-indicator">Listening... Speak now</div>
|
256 |
+
</div>
|
257 |
+
|
258 |
+
<script>
|
259 |
+
const chatLog = document.getElementById('chat-log');
|
260 |
+
const userInput = document.getElementById('user-input');
|
261 |
+
const startVoiceBtn = document.getElementById('start-voice');
|
262 |
+
const sendTextBtn = document.getElementById('send-text');
|
263 |
+
const listeningIndicator = document.getElementById('listening-indicator');
|
264 |
+
|
265 |
+
let recognition;
|
266 |
+
|
267 |
+
if ('webkitSpeechRecognition' in window) {
|
268 |
+
recognition = new webkitSpeechRecognition();
|
269 |
+
recognition.continuous = false;
|
270 |
+
recognition.interimResults = true;
|
271 |
+
recognition.lang = 'en-US';
|
272 |
+
|
273 |
+
recognition.onstart = function() {
|
274 |
+
listeningIndicator.style.display = 'block';
|
275 |
+
listeningIndicator.classList.add('pulse');
|
276 |
+
startVoiceBtn.disabled = true;
|
277 |
+
};
|
278 |
+
|
279 |
+
recognition.onend = function() {
|
280 |
+
listeningIndicator.style.display = 'none';
|
281 |
+
listeningIndicator.classList.remove('pulse');
|
282 |
+
startVoiceBtn.disabled = false;
|
283 |
+
};
|
284 |
+
|
285 |
+
recognition.onresult = function(event) {
|
286 |
+
const transcript = Array.from(event.results)
|
287 |
+
.map(result => result[0].transcript)
|
288 |
+
.join('');
|
289 |
+
|
290 |
+
userInput.value = transcript;
|
291 |
+
|
292 |
+
if (event.results[0].isFinal) {
|
293 |
+
sendMessage(transcript);
|
294 |
+
recognition.stop();
|
295 |
+
}
|
296 |
+
};
|
297 |
+
|
298 |
+
recognition.onerror = function(event) {
|
299 |
+
console.error('Speech recognition error:', event.error);
|
300 |
+
listeningIndicator.style.display = 'none';
|
301 |
+
listeningIndicator.classList.remove('pulse');
|
302 |
+
startVoiceBtn.disabled = false;
|
303 |
+
};
|
304 |
+
} else {
|
305 |
+
console.log('Speech recognition not supported');
|
306 |
+
startVoiceBtn.disabled = true;
|
307 |
+
}
|
308 |
+
|
309 |
+
startVoiceBtn.addEventListener('click', () => {
|
310 |
+
recognition.start();
|
311 |
+
});
|
312 |
+
|
313 |
+
sendTextBtn.addEventListener('click', () => {
|
314 |
+
sendMessage(userInput.value);
|
315 |
+
});
|
316 |
+
|
317 |
+
function sendMessage(message) {
|
318 |
+
if (message.trim() === '') return;
|
319 |
+
|
320 |
+
appendToChatLog('You', message);
|
321 |
+
|
322 |
+
fetch('/chat', {
|
323 |
+
method: 'POST',
|
324 |
+
headers: {
|
325 |
+
'Content-Type': 'application/json',
|
326 |
+
},
|
327 |
+
body: JSON.stringify({ message: message }),
|
328 |
+
})
|
329 |
+
.then(response => response.json())
|
330 |
+
.then(data => {
|
331 |
+
appendToChatLog('AI', data.response);
|
332 |
+
speakResponse(data.response);
|
333 |
+
})
|
334 |
+
.catch(error => console.error('Error:', error));
|
335 |
+
|
336 |
+
userInput.value = '';
|
337 |
+
}
|
338 |
+
|
339 |
+
function appendToChatLog(sender, message) {
|
340 |
+
const messageElement = document.createElement('div');
|
341 |
+
messageElement.classList.add('message', sender === 'You' ? 'user-message' : 'ai-message');
|
342 |
+
messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
|
343 |
+
chatLog.appendChild(messageElement);
|
344 |
+
chatLog.scrollTop = chatLog.scrollHeight;
|
345 |
+
}
|
346 |
+
|
347 |
+
function speakResponse(message) {
|
348 |
+
const speech = new SpeechSynthesisUtterance(message);
|
349 |
+
speech.lang = 'en-US';
|
350 |
+
window.speechSynthesis.speak(speech);
|
351 |
+
}
|
352 |
+
</script>
|
353 |
+
</body>
|
354 |
+
</html>
|
templates/student_stepexplanation.html
ADDED
@@ -0,0 +1,280 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>SmartLearn - Step-by-Step Explanations</title>
|
7 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
8 |
+
<style>
|
9 |
+
.translate-link {
|
10 |
+
font-size: 14px;
|
11 |
+
color: #3498db;
|
12 |
+
cursor: pointer;
|
13 |
+
text-decoration: underline;
|
14 |
+
position: absolute;
|
15 |
+
right: 15px;
|
16 |
+
bottom: 10px;
|
17 |
+
}
|
18 |
+
.translate-link:hover {
|
19 |
+
color: #2980b9;
|
20 |
+
}
|
21 |
+
body {
|
22 |
+
font-family: 'Arial', sans-serif;
|
23 |
+
margin: 0;
|
24 |
+
padding: 0;
|
25 |
+
display: flex;
|
26 |
+
justify-content: center;
|
27 |
+
align-items: center;
|
28 |
+
min-height: 100vh;
|
29 |
+
overflow: hidden;
|
30 |
+
}
|
31 |
+
#background-video {
|
32 |
+
position: fixed;
|
33 |
+
right: 0;
|
34 |
+
bottom: 0;
|
35 |
+
min-width: 100%;
|
36 |
+
min-height: 100%;
|
37 |
+
width: auto;
|
38 |
+
height: auto;
|
39 |
+
z-index: -1;
|
40 |
+
}
|
41 |
+
.container {
|
42 |
+
background-color: rgba(255, 255, 255, 0.7);
|
43 |
+
backdrop-filter: blur(10px);
|
44 |
+
border-radius: 20px;
|
45 |
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
46 |
+
padding: 30px;
|
47 |
+
width: 90%;
|
48 |
+
max-width: 800px;
|
49 |
+
}
|
50 |
+
h1 {
|
51 |
+
color: #333;
|
52 |
+
text-align: center;
|
53 |
+
margin-bottom: 30px;
|
54 |
+
font-size: 2.5em;
|
55 |
+
}
|
56 |
+
.chat-container {
|
57 |
+
background-color: rgba(248, 249, 250, 0.8);
|
58 |
+
border-radius: 15px;
|
59 |
+
overflow: hidden;
|
60 |
+
}
|
61 |
+
.chat-messages {
|
62 |
+
height: 400px;
|
63 |
+
overflow-y: auto;
|
64 |
+
padding: 20px;
|
65 |
+
}
|
66 |
+
.message {
|
67 |
+
margin-bottom: 15px;
|
68 |
+
padding: 10px 15px;
|
69 |
+
border-radius: 20px;
|
70 |
+
max-width: 80%;
|
71 |
+
animation: fadeIn 0.5s;
|
72 |
+
word-wrap: break-word;
|
73 |
+
position: relative;
|
74 |
+
}
|
75 |
+
.user-message {
|
76 |
+
background-color: rgba(0, 123, 255, 0.8);
|
77 |
+
color: white;
|
78 |
+
align-self: flex-end;
|
79 |
+
margin-left: auto;
|
80 |
+
}
|
81 |
+
.ai-message {
|
82 |
+
background-color: rgba(21, 106, 192, 0.2);
|
83 |
+
color: #333;
|
84 |
+
}
|
85 |
+
.chat-input {
|
86 |
+
display: flex;
|
87 |
+
padding: 15px;
|
88 |
+
background-color: rgba(255, 255, 255, 0.8);
|
89 |
+
}
|
90 |
+
#user-input {
|
91 |
+
flex-grow: 1;
|
92 |
+
border: none;
|
93 |
+
padding: 10px 15px;
|
94 |
+
border-radius: 30px;
|
95 |
+
font-size: 16px;
|
96 |
+
background-color: rgba(241, 243, 245, 0.8);
|
97 |
+
}
|
98 |
+
button {
|
99 |
+
background-color: rgba(0, 123, 255, 0.8);
|
100 |
+
color: white;
|
101 |
+
border: none;
|
102 |
+
padding: 10px 20px;
|
103 |
+
border-radius: 30px;
|
104 |
+
cursor: pointer;
|
105 |
+
transition: background-color 0.3s;
|
106 |
+
font-size: 16px;
|
107 |
+
margin-left: 10px;
|
108 |
+
}
|
109 |
+
button:hover {
|
110 |
+
background-color: rgba(0, 86, 179, 0.8);
|
111 |
+
}
|
112 |
+
.back-button {
|
113 |
+
position: absolute;
|
114 |
+
top: 20px;
|
115 |
+
left: 20px;
|
116 |
+
background-color: rgba(108, 117, 125, 0.8);
|
117 |
+
}
|
118 |
+
.back-button:hover {
|
119 |
+
background-color: rgba(90, 98, 104, 0.8);
|
120 |
+
}
|
121 |
+
@keyframes fadeIn {
|
122 |
+
from { opacity: 0; transform: translateY(10px); }
|
123 |
+
to { opacity: 1; transform: translateY(0); }
|
124 |
+
}
|
125 |
+
.typing-animation {
|
126 |
+
display: inline-block;
|
127 |
+
white-space: pre-wrap;
|
128 |
+
word-wrap: break-word;
|
129 |
+
border-right: 2px solid #333;
|
130 |
+
padding-right: 2px;
|
131 |
+
max-width: 100%;
|
132 |
+
}
|
133 |
+
</style>
|
134 |
+
</head>
|
135 |
+
<body>
|
136 |
+
<video autoplay muted loop id="background-video">
|
137 |
+
<source src="../static/stepbystep.mp4" type="video/mp4">
|
138 |
+
Your browser does not support the video tag.
|
139 |
+
</video>
|
140 |
+
|
141 |
+
<div class="container">
|
142 |
+
<button class="back-button" onclick="goBack()"><i class="fas fa-arrow-left"></i> Back</button>
|
143 |
+
<h1><i class="fas fa-graduation-cap"></i> Step By Step Explanation</h1>
|
144 |
+
<div class="chat-container">
|
145 |
+
<div id="chat-messages" class="chat-messages">
|
146 |
+
<!-- Messages will be added here dynamically -->
|
147 |
+
</div>
|
148 |
+
<div class="chat-input">
|
149 |
+
<input type="text" id="user-input" placeholder="Ask your question here...">
|
150 |
+
<button onclick="sendMessage()"><i class="fas fa-paper-plane"></i> Send</button>
|
151 |
+
</div>
|
152 |
+
</div>
|
153 |
+
</div>
|
154 |
+
|
155 |
+
<script>
|
156 |
+
const chatMessages = document.getElementById('chat-messages');
|
157 |
+
const userInput = document.getElementById('user-input');
|
158 |
+
const initialMessage = "Hey there! I'm here to assist you. You can ask any question, and I'll explain it step by step to make it professional.";
|
159 |
+
|
160 |
+
function typeWriter(text, element, index = 0) {
|
161 |
+
if (index < text.length) {
|
162 |
+
element.innerHTML += text.charAt(index);
|
163 |
+
index++;
|
164 |
+
setTimeout(() => typeWriter(text, element, index), 10);
|
165 |
+
} else {
|
166 |
+
element.style.borderRight = 'none';
|
167 |
+
}
|
168 |
+
}
|
169 |
+
|
170 |
+
function addMessage(content, isUser) {
|
171 |
+
// Remove any existing typing animation
|
172 |
+
const existingTyping = chatMessages.querySelector('.typing-animation');
|
173 |
+
if (existingTyping) {
|
174 |
+
existingTyping.parentElement.remove();
|
175 |
+
}
|
176 |
+
|
177 |
+
const messageDiv = document.createElement('div');
|
178 |
+
messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
|
179 |
+
messageDiv.innerHTML = content.replace(/\n/g, '<br>');
|
180 |
+
|
181 |
+
if (!isUser) {
|
182 |
+
const translateLink = document.createElement('span');
|
183 |
+
translateLink.className = 'translate-link';
|
184 |
+
translateLink.textContent = 'Translate';
|
185 |
+
translateLink.onclick = function() {
|
186 |
+
translateMessage(messageDiv);
|
187 |
+
};
|
188 |
+
messageDiv.appendChild(translateLink);
|
189 |
+
}
|
190 |
+
|
191 |
+
chatMessages.appendChild(messageDiv);
|
192 |
+
chatMessages.scrollTop = chatMessages.scrollHeight;
|
193 |
+
|
194 |
+
if (!isUser) {
|
195 |
+
const typingSpan = document.createElement('span');
|
196 |
+
typingSpan.className = 'typing-animation';
|
197 |
+
typeWriter(content, typingSpan);
|
198 |
+
}
|
199 |
+
}
|
200 |
+
|
201 |
+
function showTypingIndicator() {
|
202 |
+
const typingDiv = document.createElement('div');
|
203 |
+
typingDiv.className = 'typing-indicator';
|
204 |
+
typingDiv.innerHTML = 'AI is typing<div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>';
|
205 |
+
chatMessages.appendChild(typingDiv);
|
206 |
+
chatMessages.scrollTop = chatMessages.scrollHeight;
|
207 |
+
}
|
208 |
+
|
209 |
+
function hideTypingIndicator() {
|
210 |
+
const typingIndicator = document.querySelector('.typing-indicator');
|
211 |
+
if (typingIndicator) {
|
212 |
+
typingIndicator.remove();
|
213 |
+
}
|
214 |
+
}
|
215 |
+
|
216 |
+
function translateMessage(messageDiv) {
|
217 |
+
const text = messageDiv.textContent;
|
218 |
+
|
219 |
+
fetch('/translate', {
|
220 |
+
method: 'POST',
|
221 |
+
headers: {
|
222 |
+
'Content-Type': 'application/json'
|
223 |
+
},
|
224 |
+
body: JSON.stringify({ text: text })
|
225 |
+
})
|
226 |
+
.then(response => response.json())
|
227 |
+
.then(data => {
|
228 |
+
if (data.translated_text) {
|
229 |
+
messageDiv.innerHTML = data.translated_text;
|
230 |
+
}
|
231 |
+
})
|
232 |
+
.catch(error => {
|
233 |
+
console.error('Error:', error);
|
234 |
+
});
|
235 |
+
}
|
236 |
+
|
237 |
+
function sendMessage() {
|
238 |
+
const message = userInput.value.trim();
|
239 |
+
if (message) {
|
240 |
+
addMessage(message, true);
|
241 |
+
userInput.value = '';
|
242 |
+
|
243 |
+
showTypingIndicator();
|
244 |
+
|
245 |
+
fetch('/generate_step_by_step_explanation', {
|
246 |
+
method: 'POST',
|
247 |
+
headers: {
|
248 |
+
'Content-Type': 'application/json',
|
249 |
+
},
|
250 |
+
body: JSON.stringify({ question: message }),
|
251 |
+
})
|
252 |
+
.then(response => response.json())
|
253 |
+
.then(data => {
|
254 |
+
hideTypingIndicator();
|
255 |
+
addMessage(data.answer, false);
|
256 |
+
})
|
257 |
+
.catch(error => {
|
258 |
+
console.error('Error:', error);
|
259 |
+
hideTypingIndicator();
|
260 |
+
addMessage("Sorry, there was an error processing your request.", false);
|
261 |
+
});
|
262 |
+
}
|
263 |
+
}
|
264 |
+
|
265 |
+
userInput.addEventListener('keypress', function(e) {
|
266 |
+
if (e.key === 'Enter') {
|
267 |
+
sendMessage();
|
268 |
+
}
|
269 |
+
});
|
270 |
+
|
271 |
+
function goBack() {
|
272 |
+
window.history.back();
|
273 |
+
}
|
274 |
+
|
275 |
+
window.onload = function() {
|
276 |
+
addMessage(initialMessage, false);
|
277 |
+
};
|
278 |
+
</script>
|
279 |
+
</body>
|
280 |
+
</html>
|
templates/student_studyplans.html
ADDED
@@ -0,0 +1,221 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>SmartLearn - Personalized Study Plan</title>
|
7 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
8 |
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
|
9 |
+
<style>
|
10 |
+
body, html {
|
11 |
+
margin: 0;
|
12 |
+
padding: 0;
|
13 |
+
font-family: 'Poppins', sans-serif;
|
14 |
+
background: url('https://wallpapercave.com/wp/ew0V5jf.jpg') no-repeat center center fixed;
|
15 |
+
background-size: cover;
|
16 |
+
position: relative;
|
17 |
+
min-height: 100vh;
|
18 |
+
display: flex;
|
19 |
+
justify-content: center;
|
20 |
+
align-items: center;
|
21 |
+
}
|
22 |
+
body::before {
|
23 |
+
content: '';
|
24 |
+
position: absolute;
|
25 |
+
top: 0;
|
26 |
+
left: 0;
|
27 |
+
right: 0;
|
28 |
+
bottom: 0;
|
29 |
+
background-color: rgba(0, 0, 0, 0.2);
|
30 |
+
z-index: 1;
|
31 |
+
}
|
32 |
+
.container {
|
33 |
+
position: relative;
|
34 |
+
z-index: 2;
|
35 |
+
background-color: rgba(241, 241, 241, 0.2);
|
36 |
+
border-radius: 20px;
|
37 |
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
38 |
+
padding: 40px;
|
39 |
+
width: 90%;
|
40 |
+
max-width: 800px;
|
41 |
+
}
|
42 |
+
.back-button {
|
43 |
+
position: absolute;
|
44 |
+
top: 20px;
|
45 |
+
left: 20px;
|
46 |
+
background-color: #007bff;
|
47 |
+
color: white;
|
48 |
+
border: none;
|
49 |
+
border-radius: 50%;
|
50 |
+
width: 40px;
|
51 |
+
height: 40px;
|
52 |
+
cursor: pointer;
|
53 |
+
display: flex;
|
54 |
+
justify-content: center;
|
55 |
+
align-items: center;
|
56 |
+
font-size: 18px;
|
57 |
+
transition: background-color 0.3s;
|
58 |
+
z-index: 3;
|
59 |
+
}
|
60 |
+
.back-button:hover {
|
61 |
+
background-color: #0056b3;
|
62 |
+
}
|
63 |
+
h1 {
|
64 |
+
text-align: center;
|
65 |
+
color: #333;
|
66 |
+
margin-bottom: 30px;
|
67 |
+
font-weight: 600;
|
68 |
+
}
|
69 |
+
.study-plan-form {
|
70 |
+
display: grid;
|
71 |
+
gap: 20px;
|
72 |
+
margin-bottom: 30px;
|
73 |
+
}
|
74 |
+
.form-group {
|
75 |
+
display: flex;
|
76 |
+
flex-direction: column;
|
77 |
+
}
|
78 |
+
label {
|
79 |
+
margin-bottom: 5px;
|
80 |
+
font-weight: 500;
|
81 |
+
color: white; /* Changed the color to white */
|
82 |
+
}
|
83 |
+
input, select {
|
84 |
+
padding: 10px;
|
85 |
+
border: 1px solid #ddd;
|
86 |
+
border-radius: 5px;
|
87 |
+
font-size: 16px;
|
88 |
+
}
|
89 |
+
button {
|
90 |
+
background-color: #28a745;
|
91 |
+
color: white;
|
92 |
+
border: none;
|
93 |
+
padding: 12px 20px;
|
94 |
+
border-radius: 5px;
|
95 |
+
cursor: pointer;
|
96 |
+
font-size: 16px;
|
97 |
+
transition: background-color 0.3s;
|
98 |
+
}
|
99 |
+
button:hover {
|
100 |
+
background-color: #218838;
|
101 |
+
}
|
102 |
+
.chat-container {
|
103 |
+
background-color: #f8f9fa;
|
104 |
+
border-radius: 10px;
|
105 |
+
padding: 20px;
|
106 |
+
max-height: 300px;
|
107 |
+
overflow-y: auto;
|
108 |
+
}
|
109 |
+
.chat-messages {
|
110 |
+
display: flex;
|
111 |
+
flex-direction: column;
|
112 |
+
}
|
113 |
+
.message {
|
114 |
+
margin-bottom: 15px;
|
115 |
+
padding: 10px;
|
116 |
+
border-radius: 10px;
|
117 |
+
max-width: 80%;
|
118 |
+
}
|
119 |
+
.user-message {
|
120 |
+
align-self: flex-end;
|
121 |
+
background-color: #007bff;
|
122 |
+
color: white;
|
123 |
+
}
|
124 |
+
.ai-message {
|
125 |
+
align-self: flex-start;
|
126 |
+
background-color: #e9ecef;
|
127 |
+
color: #333;
|
128 |
+
}
|
129 |
+
</style>
|
130 |
+
</head>
|
131 |
+
<body>
|
132 |
+
<div class="container">
|
133 |
+
<button class="back-button" onclick="goBack()"><i class="fas fa-arrow-left"></i></button>
|
134 |
+
<h1><i class="fas fa-graduation-cap"></i> Personalized Study Plan</h1>
|
135 |
+
<div class="study-plan-form">
|
136 |
+
<div class="form-group">
|
137 |
+
<label for="subjects"><i class="fas fa-book"></i> Subjects (comma-separated):</label>
|
138 |
+
<input type="text" id="subjects" placeholder="Math, Science, History">
|
139 |
+
</div>
|
140 |
+
<div class="form-group">
|
141 |
+
<label for="available-time"><i class="fas fa-clock"></i> Available study time per day (hours):</label>
|
142 |
+
<input type="number" id="available-time" min="1" max="24" value="2">
|
143 |
+
</div>
|
144 |
+
<div class="form-group">
|
145 |
+
<label for="goal"><i class="fas fa-bullseye"></i> Study goal:</label>
|
146 |
+
<input type="text" id="goal" placeholder="Prepare for final exams">
|
147 |
+
</div>
|
148 |
+
<div class="form-group">
|
149 |
+
<label for="area-lag"><i class="fas fa-exclamation-triangle"></i> Areas of Lag (comma-separated):</label>
|
150 |
+
<input type="text" id="area-lag" placeholder="Algebra, Thermodynamics">
|
151 |
+
</div>
|
152 |
+
<div class="form-group">
|
153 |
+
<label for="learning-style"><i class="fas fa-brain"></i> Preferred learning style:</label>
|
154 |
+
<select id="learning-style">
|
155 |
+
<option value="visual">Visual</option>
|
156 |
+
<option value="auditory">Auditory</option>
|
157 |
+
<option value="reading">Reading/Writing</option>
|
158 |
+
<option value="kinesthetic">Kinesthetic</option>
|
159 |
+
</select>
|
160 |
+
</div>
|
161 |
+
<button onclick="generateStudyPlan()"><i class="fas fa-magic"></i> Generate Study Plan</button>
|
162 |
+
</div>
|
163 |
+
<div class="chat-container">
|
164 |
+
<div id="chat-messages" class="chat-messages"></div>
|
165 |
+
</div>
|
166 |
+
</div>
|
167 |
+
|
168 |
+
<script>
|
169 |
+
const chatMessages = document.getElementById('chat-messages');
|
170 |
+
|
171 |
+
function addMessage(content, isUser) {
|
172 |
+
const messageDiv = document.createElement('div');
|
173 |
+
messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
|
174 |
+
messageDiv.innerHTML = content; // Use innerHTML to render HTML tags
|
175 |
+
chatMessages.appendChild(messageDiv);
|
176 |
+
chatMessages.scrollTop = chatMessages.scrollHeight;
|
177 |
+
}
|
178 |
+
|
179 |
+
function generateStudyPlan() {
|
180 |
+
const subjects = document.getElementById('subjects').value;
|
181 |
+
const availableTime = document.getElementById('available-time').value;
|
182 |
+
const goal = document.getElementById('goal').value;
|
183 |
+
const areaLag = document.getElementById('area-lag').value;
|
184 |
+
const learningStyle = document.getElementById('learning-style').value;
|
185 |
+
|
186 |
+
const userInput = `Subjects: ${subjects}, Available time: ${availableTime} hours, Goal: ${goal}, Areas of Lag: ${areaLag}, Learning style: ${learningStyle}`;
|
187 |
+
addMessage(`Generating study plan for: ${userInput}`, true);
|
188 |
+
|
189 |
+
// API call to Flask backend
|
190 |
+
fetch('/generate_study_plan', {
|
191 |
+
method: 'POST',
|
192 |
+
headers: {
|
193 |
+
'Content-Type': 'application/json'
|
194 |
+
},
|
195 |
+
body: JSON.stringify({
|
196 |
+
subjects: subjects,
|
197 |
+
hours: availableTime,
|
198 |
+
areaLag: areaLag,
|
199 |
+
goal: goal,
|
200 |
+
learningStyle: learningStyle
|
201 |
+
})
|
202 |
+
})
|
203 |
+
.then(response => response.json())
|
204 |
+
.then(data => {
|
205 |
+
addMessage(data.study_plan, false);
|
206 |
+
})
|
207 |
+
.catch(error => {
|
208 |
+
addMessage('Error generating study plan. Please try again.', false);
|
209 |
+
console.error('Error:', error);
|
210 |
+
});
|
211 |
+
}
|
212 |
+
|
213 |
+
// Initial message
|
214 |
+
addMessage("Welcome! Fill out the form above to generate your personalized study plan.", false);
|
215 |
+
|
216 |
+
function goBack() {
|
217 |
+
window.history.back();
|
218 |
+
}
|
219 |
+
</script>
|
220 |
+
</body>
|
221 |
+
</html>
|
templates/student_summarise_video.html
ADDED
@@ -0,0 +1,228 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Course Page - SmartLearn</title>
|
7 |
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
9 |
+
<link rel="stylesheet" href="{{ url_for('static', filename='student_course.css') }}">
|
10 |
+
</head>
|
11 |
+
<body>
|
12 |
+
<style>
|
13 |
+
.logo {
|
14 |
+
font-size: 28px;
|
15 |
+
font-weight: 700;
|
16 |
+
color: #fff;
|
17 |
+
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
18 |
+
display: flex;
|
19 |
+
align-items: center;
|
20 |
+
}
|
21 |
+
|
22 |
+
.logo img {
|
23 |
+
height: 40px;
|
24 |
+
margin-right: 10px;
|
25 |
+
}
|
26 |
+
|
27 |
+
|
28 |
+
.nav-bar {
|
29 |
+
background-color: #fff;
|
30 |
+
padding: 10px 0;
|
31 |
+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
32 |
+
}
|
33 |
+
|
34 |
+
.nav-bar ul {
|
35 |
+
list-style-type: none;
|
36 |
+
margin: 0;
|
37 |
+
padding: 0;
|
38 |
+
display: flex;
|
39 |
+
justify-content: center;
|
40 |
+
align-items: center;
|
41 |
+
}
|
42 |
+
|
43 |
+
.nav-bar li {
|
44 |
+
margin: 0 15px;
|
45 |
+
}
|
46 |
+
|
47 |
+
.nav-bar a {
|
48 |
+
text-decoration: none;
|
49 |
+
color: var(--text-color);
|
50 |
+
font-weight: 600;
|
51 |
+
transition: all 0.3s ease;
|
52 |
+
display: flex;
|
53 |
+
align-items: center;
|
54 |
+
}
|
55 |
+
|
56 |
+
.nav-bar a img {
|
57 |
+
height: 24px;
|
58 |
+
margin-right: 5px;
|
59 |
+
}
|
60 |
+
body {
|
61 |
+
font-family: Arial, sans-serif;
|
62 |
+
line-height: 1.6;
|
63 |
+
margin: 0;
|
64 |
+
padding: 20px;
|
65 |
+
background-color: #f4f4f4;
|
66 |
+
}
|
67 |
+
.container {
|
68 |
+
max-width: 800px;
|
69 |
+
margin: auto;
|
70 |
+
background: white;
|
71 |
+
padding: 20px;
|
72 |
+
border-radius: 5px;
|
73 |
+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
74 |
+
}
|
75 |
+
h1 {
|
76 |
+
color: #333;
|
77 |
+
text-align: center;
|
78 |
+
}
|
79 |
+
#linkInput {
|
80 |
+
width: 100%;
|
81 |
+
padding: 10px;
|
82 |
+
margin-bottom: 10px;
|
83 |
+
border: 1px solid #ddd;
|
84 |
+
border-radius: 4px;
|
85 |
+
}
|
86 |
+
#summarizeBtn {
|
87 |
+
display: block;
|
88 |
+
width: 100%;
|
89 |
+
padding: 10px;
|
90 |
+
background-color: #4CAF50;
|
91 |
+
color: white;
|
92 |
+
border: none;
|
93 |
+
border-radius: 4px;
|
94 |
+
cursor: pointer;
|
95 |
+
}
|
96 |
+
#summarizeBtn:hover {
|
97 |
+
background-color: #45a049;
|
98 |
+
}
|
99 |
+
#summary {
|
100 |
+
margin-top: 20px;
|
101 |
+
padding: 15px;
|
102 |
+
background-color: #e7f3fe;
|
103 |
+
border-left: 6px solid #2196F3;
|
104 |
+
}
|
105 |
+
#loading {
|
106 |
+
text-align: center;
|
107 |
+
display: none;
|
108 |
+
}
|
109 |
+
</style>
|
110 |
+
|
111 |
+
<header>
|
112 |
+
<div class="">
|
113 |
+
<div class="header-content">
|
114 |
+
<div class="logo"><img src="../static/smart-learn.jpeg" alt="">SmartLearn</div>
|
115 |
+
<div class="search-bar">
|
116 |
+
<input type="text" placeholder="Search for anything">
|
117 |
+
<div class="ai-tools">
|
118 |
+
<i class="fas fa-camera" title="Photo Question Answering"></i>
|
119 |
+
<i class="fas fa-brain" title="AI Tutor"></i>
|
120 |
+
<i class="fas fa-robot" title="AI Assistant"></i>
|
121 |
+
</div>
|
122 |
+
</div>
|
123 |
+
<div class="user-actions">
|
124 |
+
<span class="points-display">1500 pts</span>
|
125 |
+
<div class="profile-icon">A</div>
|
126 |
+
</div>
|
127 |
+
</div>
|
128 |
+
</div>
|
129 |
+
</header>
|
130 |
+
<nav class="nav-bar">
|
131 |
+
<ul>
|
132 |
+
<li><a href="{{ url_for('student') }}"><img src="https://cdn-icons-png.flaticon.com/512/1946/1946488.png" alt="Home">Home</a></li>
|
133 |
+
<li><a href="{{ url_for('student') }}#ai-powered-tools"><img src="https://www.kalupurbank.com/wp-content/uploads/2023/02/robot-chatbot-icon-sign-free-vector.webp" alt="Home">Ai Tools</a></li>
|
134 |
+
<li><a href="{{ url_for('homework') }}"><img src="https://cdn-icons-png.flaticon.com/512/1828/1828919.png" alt="Homework">Homework</a></li>
|
135 |
+
<li><a href="{{ url_for('student_courses') }}"><img src="https://cdn-icons-png.flaticon.com/512/1048/1048953.png" alt="Courses">Courses</a></li>
|
136 |
+
<li><a href="{{ url_for('speak') }}"><img src="https://cdn-icons-png.flaticon.com/512/4712/4712026.png" alt="Speak With AI">Speak With AI</a></li>
|
137 |
+
<li><a href="{{ url_for('summarise_video') }}"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/1280px-YouTube_full-color_icon_%282017%29.svg.png" alt="Ssummarise_video">summarise_video</a></li>
|
138 |
+
</ul>
|
139 |
+
</nav>
|
140 |
+
|
141 |
+
</head>
|
142 |
+
<body>
|
143 |
+
<div class="container">
|
144 |
+
<h1>YouTube Video Summarizer</h1>
|
145 |
+
<input type="text" id="linkInput" placeholder="Paste YouTube video link here">
|
146 |
+
<button id="summarizeBtn">Summarize Video</button>
|
147 |
+
<div id="loading">Summarizing... Please wait.</div>
|
148 |
+
<div id="summary"></div>
|
149 |
+
</div>
|
150 |
+
|
151 |
+
<script>
|
152 |
+
document.getElementById('summarizeBtn').addEventListener('click', function() {
|
153 |
+
var link = document.getElementById('linkInput').value;
|
154 |
+
var summaryDiv = document.getElementById('summary');
|
155 |
+
var loadingDiv = document.getElementById('loading');
|
156 |
+
|
157 |
+
if (link) {
|
158 |
+
// Show loading message
|
159 |
+
loadingDiv.style.display = 'block';
|
160 |
+
summaryDiv.innerHTML = '';
|
161 |
+
|
162 |
+
// Here you would typically send the link to your backend for processing
|
163 |
+
// For this example, we'll simulate a delay and then show a mock summary
|
164 |
+
setTimeout(function() {
|
165 |
+
loadingDiv.style.display = 'none';
|
166 |
+
summaryDiv.innerHTML = '<h3>Summary:</h3><p>This is where the summary of the YouTube video would appear. Your model would process the video and generate a summary based on its content.</p>';
|
167 |
+
}, 2000); // Simulating a 2-second delay
|
168 |
+
|
169 |
+
// In a real application, you would replace the above with an actual API call:
|
170 |
+
/*
|
171 |
+
fetch('/api/summarize', {
|
172 |
+
method: 'POST',
|
173 |
+
headers: {
|
174 |
+
'Content-Type': 'application/json',
|
175 |
+
},
|
176 |
+
body: JSON.stringify({link: link}),
|
177 |
+
})
|
178 |
+
.then(response => response.json())
|
179 |
+
.then(data => {
|
180 |
+
loadingDiv.style.display = 'none';
|
181 |
+
summaryDiv.innerHTML = '<h3>Summary:</h3><p>' + data.summary + '</p>';
|
182 |
+
})
|
183 |
+
.catch((error) => {
|
184 |
+
loadingDiv.style.display = 'none';
|
185 |
+
summaryDiv.innerHTML = '<p>Error: Unable to summarize video. Please try again.</p>';
|
186 |
+
});
|
187 |
+
*/
|
188 |
+
} else {
|
189 |
+
summaryDiv.innerHTML = '<p>Please enter a valid YouTube link.</p>';
|
190 |
+
}
|
191 |
+
});
|
192 |
+
</script>
|
193 |
+
<script>
|
194 |
+
document.getElementById('summarizeBtn').addEventListener('click', function() {
|
195 |
+
var link = document.getElementById('linkInput').value;
|
196 |
+
var summaryDiv = document.getElementById('summary');
|
197 |
+
var loadingDiv = document.getElementById('loading');
|
198 |
+
|
199 |
+
if (link) {
|
200 |
+
loadingDiv.style.display = 'block';
|
201 |
+
summaryDiv.innerHTML = '';
|
202 |
+
|
203 |
+
fetch('/summarize_video', {
|
204 |
+
method: 'POST',
|
205 |
+
headers: {
|
206 |
+
'Content-Type': 'application/json',
|
207 |
+
},
|
208 |
+
body: JSON.stringify({url: link}),
|
209 |
+
})
|
210 |
+
.then(response => response.json())
|
211 |
+
.then(data => {
|
212 |
+
loadingDiv.style.display = 'none';
|
213 |
+
|
214 |
+
summaryDiv.innerHTML = '<h3>Summary:</h3><p>' + data.summary + '</p>';
|
215 |
+
|
216 |
+
|
217 |
+
})
|
218 |
+
.catch((error) => {
|
219 |
+
loadingDiv.style.display = 'none';
|
220 |
+
summaryDiv.innerHTML = '<p>Error: Unable to summarize video. Please try again.</p>';
|
221 |
+
});
|
222 |
+
} else {
|
223 |
+
summaryDiv.innerHTML = '<p>Please enter a valid YouTube link.</p>';
|
224 |
+
}
|
225 |
+
});
|
226 |
+
</script>
|
227 |
+
</body>
|
228 |
+
</html>
|
templates/teacher.html
ADDED
@@ -0,0 +1,1319 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
|
2 |
+
<!DOCTYPE html>
|
3 |
+
<html lang="en">
|
4 |
+
<head>
|
5 |
+
<meta charset="UTF-8">
|
6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
7 |
+
<title>Teacher Portal - ABC Group of Schools</title>
|
8 |
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
9 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
10 |
+
<style>
|
11 |
+
:root {
|
12 |
+
--primary-color: #3498db;
|
13 |
+
--secondary-color: #2c3e50;
|
14 |
+
--background-color: rgba(236, 240, 241, 0.8);
|
15 |
+
--text-color: #333;
|
16 |
+
--card-background: #fff;
|
17 |
+
}
|
18 |
+
|
19 |
+
body {
|
20 |
+
font-family: 'Roboto', sans-serif;
|
21 |
+
margin: 0;
|
22 |
+
padding: 0;
|
23 |
+
background-color: var(--background-color);
|
24 |
+
color: var(--text-color);
|
25 |
+
line-height: 1.6;
|
26 |
+
background-image: url('https://i.pinimg.com/736x/d0/b1/39/d0b1395ab921f995d3340b4a45007dd2.jpg');
|
27 |
+
background-size: cover;
|
28 |
+
background-position: center;
|
29 |
+
background-attachment: fixed;
|
30 |
+
}
|
31 |
+
|
32 |
+
.teacher-portal {
|
33 |
+
max-width: 1200px;
|
34 |
+
margin: 40px auto;
|
35 |
+
padding: 30px;
|
36 |
+
background: var(--card-background);
|
37 |
+
border-radius: 15px;
|
38 |
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
39 |
+
}
|
40 |
+
|
41 |
+
.header {
|
42 |
+
text-align: center;
|
43 |
+
margin-bottom: 40px;
|
44 |
+
position: relative;
|
45 |
+
}
|
46 |
+
|
47 |
+
.header h1 {
|
48 |
+
font-size: 3em;
|
49 |
+
margin-bottom: 10px;
|
50 |
+
color: var(--primary-color);
|
51 |
+
letter-spacing: 1px;
|
52 |
+
text-transform: uppercase;
|
53 |
+
}
|
54 |
+
|
55 |
+
.header p {
|
56 |
+
font-size: 1.2em;
|
57 |
+
color: var(--secondary-color);
|
58 |
+
}
|
59 |
+
|
60 |
+
.dashboard {
|
61 |
+
display: grid;
|
62 |
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
63 |
+
gap: 30px;
|
64 |
+
margin-bottom: 40px;
|
65 |
+
}
|
66 |
+
|
67 |
+
.dashboard-card {
|
68 |
+
background: var(--card-background);
|
69 |
+
border-radius: 10px;
|
70 |
+
padding: 20px;
|
71 |
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
72 |
+
transition: transform 0.3s ease;
|
73 |
+
text-align: center;
|
74 |
+
}
|
75 |
+
|
76 |
+
.dashboard-card:hover {
|
77 |
+
transform: translateY(-5px);
|
78 |
+
}
|
79 |
+
|
80 |
+
.dashboard-card h3 {
|
81 |
+
font-size: 1.5em;
|
82 |
+
color: var(--primary-color);
|
83 |
+
margin-bottom: 15px;
|
84 |
+
}
|
85 |
+
|
86 |
+
.dashboard-card p {
|
87 |
+
font-size: 2em;
|
88 |
+
font-weight: bold;
|
89 |
+
color: var(--secondary-color);
|
90 |
+
margin: 0;
|
91 |
+
}
|
92 |
+
|
93 |
+
.dashboard-card i {
|
94 |
+
font-size: 3em;
|
95 |
+
color: var(--primary-color);
|
96 |
+
margin-bottom: 15px;
|
97 |
+
}
|
98 |
+
|
99 |
+
#student-list {
|
100 |
+
background: var(--card-background);
|
101 |
+
border-radius: 10px;
|
102 |
+
padding: 20px;
|
103 |
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
104 |
+
}
|
105 |
+
|
106 |
+
#student-list h3 {
|
107 |
+
font-size: 1.8em;
|
108 |
+
color: var(--primary-color);
|
109 |
+
margin-bottom: 20px;
|
110 |
+
text-align: center;
|
111 |
+
}
|
112 |
+
|
113 |
+
.student-grid {
|
114 |
+
display: grid;
|
115 |
+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
116 |
+
gap: 20px;
|
117 |
+
}
|
118 |
+
|
119 |
+
.student-card {
|
120 |
+
background: var(--background-color);
|
121 |
+
border-radius: 8px;
|
122 |
+
padding: 15px;
|
123 |
+
text-align: center;
|
124 |
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
125 |
+
}
|
126 |
+
|
127 |
+
.student-card:hover {
|
128 |
+
transform: translateY(-5px);
|
129 |
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
130 |
+
}
|
131 |
+
|
132 |
+
.student-card h4 {
|
133 |
+
margin: 0 0 10px;
|
134 |
+
color: var(--secondary-color);
|
135 |
+
}
|
136 |
+
|
137 |
+
.student-card p {
|
138 |
+
margin: 5px 0;
|
139 |
+
font-size: 0.9em;
|
140 |
+
color: var(--text-color);
|
141 |
+
}
|
142 |
+
|
143 |
+
.button-container {
|
144 |
+
text-align: center;
|
145 |
+
margin-top: 30px;
|
146 |
+
}
|
147 |
+
|
148 |
+
button {
|
149 |
+
background: var(--primary-color);
|
150 |
+
color: white;
|
151 |
+
border: none;
|
152 |
+
padding: 12px 25px;
|
153 |
+
font-size: 1em;
|
154 |
+
border-radius: 5px;
|
155 |
+
cursor: pointer;
|
156 |
+
transition: background 0.3s, transform 0.3s;
|
157 |
+
text-transform: uppercase;
|
158 |
+
letter-spacing: 1px;
|
159 |
+
}
|
160 |
+
|
161 |
+
button:hover {
|
162 |
+
background: #2980b9;
|
163 |
+
transform: translateY(-2px);
|
164 |
+
}
|
165 |
+
|
166 |
+
#timetable-generator {
|
167 |
+
margin-top: 40px;
|
168 |
+
background: var(--card-background);
|
169 |
+
border-radius: 10px;
|
170 |
+
padding: 20px;
|
171 |
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
172 |
+
}
|
173 |
+
|
174 |
+
#timetable-generator h3 {
|
175 |
+
font-size: 1.8em;
|
176 |
+
color: var(--primary-color);
|
177 |
+
margin-bottom: 20px;
|
178 |
+
text-align: center;
|
179 |
+
}
|
180 |
+
|
181 |
+
#timetable-generator form {
|
182 |
+
display: grid;
|
183 |
+
gap: 10px;
|
184 |
+
max-width: 500px;
|
185 |
+
margin: 0 auto;
|
186 |
+
}
|
187 |
+
|
188 |
+
#timetable-generator label {
|
189 |
+
font-size: 1em;
|
190 |
+
font-weight: bold;
|
191 |
+
}
|
192 |
+
|
193 |
+
#timetable-generator input {
|
194 |
+
padding: 10px;
|
195 |
+
border: 1px solid #ccc;
|
196 |
+
border-radius: 5px;
|
197 |
+
font-size: 1em;
|
198 |
+
}
|
199 |
+
|
200 |
+
#timetable-generator button {
|
201 |
+
background: var(--primary-color);
|
202 |
+
color: white;
|
203 |
+
border: none;
|
204 |
+
padding: 12px;
|
205 |
+
font-size: 1em;
|
206 |
+
border-radius: 5px;
|
207 |
+
cursor: pointer;
|
208 |
+
transition: background 0.3s, transform 0.3s;
|
209 |
+
margin-top: 20px;
|
210 |
+
}
|
211 |
+
|
212 |
+
#timetable-generator button:hover {
|
213 |
+
background: #2980b9;
|
214 |
+
transform: translateY(-2px);
|
215 |
+
}
|
216 |
+
|
217 |
+
#timetable-result {
|
218 |
+
margin-top: 20px;
|
219 |
+
padding: 15px;
|
220 |
+
background: #fff;
|
221 |
+
border-radius: 5px;
|
222 |
+
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
223 |
+
white-space: pre-wrap;
|
224 |
+
}
|
225 |
+
|
226 |
+
.fade-in {
|
227 |
+
animation: fadeIn 0.5s ease-in;
|
228 |
+
}
|
229 |
+
|
230 |
+
@keyframes fadeIn {
|
231 |
+
from { opacity: 0; }
|
232 |
+
to { opacity: 1; }
|
233 |
+
}
|
234 |
+
.navbar {
|
235 |
+
background-color: var(--primary-color);
|
236 |
+
padding: 10px 0;
|
237 |
+
position: sticky;
|
238 |
+
top: 0;
|
239 |
+
z-index: 1000;
|
240 |
+
}
|
241 |
+
|
242 |
+
.navbar ul {
|
243 |
+
list-style-type: none;
|
244 |
+
margin: 0;
|
245 |
+
padding: 0;
|
246 |
+
display: flex;
|
247 |
+
justify-content: center;
|
248 |
+
}
|
249 |
+
|
250 |
+
.navbar li {
|
251 |
+
margin: 0 15px;
|
252 |
+
}
|
253 |
+
|
254 |
+
.navbar a {
|
255 |
+
color: white;
|
256 |
+
text-decoration: none;
|
257 |
+
font-size: 1.1em;
|
258 |
+
transition: color 0.3s;
|
259 |
+
}
|
260 |
+
|
261 |
+
.navbar a:hover {
|
262 |
+
color: var(--secondary-color);
|
263 |
+
}
|
264 |
+
.modal {
|
265 |
+
display: none;
|
266 |
+
position: fixed;
|
267 |
+
z-index: 1;
|
268 |
+
left: 0;
|
269 |
+
top: 0;
|
270 |
+
width: 100%;
|
271 |
+
height: 100%;
|
272 |
+
overflow: auto;
|
273 |
+
background-color: rgba(0,0,0,0.4);
|
274 |
+
}
|
275 |
+
|
276 |
+
.modal-content {
|
277 |
+
background-color: #fefefe;
|
278 |
+
margin: 15% auto;
|
279 |
+
padding: 20px;
|
280 |
+
border: 1px solid #888;
|
281 |
+
width: 80%;
|
282 |
+
max-width: 600px;
|
283 |
+
border-radius: 10px;
|
284 |
+
}
|
285 |
+
|
286 |
+
.close {
|
287 |
+
color: #aaa;
|
288 |
+
float: right;
|
289 |
+
font-size: 28px;
|
290 |
+
font-weight: bold;
|
291 |
+
}
|
292 |
+
|
293 |
+
.close:hover,
|
294 |
+
.close:focus {
|
295 |
+
color: black;
|
296 |
+
text-decoration: none;
|
297 |
+
cursor: pointer;
|
298 |
+
}
|
299 |
+
|
300 |
+
#generate-ai-report {
|
301 |
+
background-color: var(--primary-color);
|
302 |
+
color: white;
|
303 |
+
border: none;
|
304 |
+
padding: 10px 20px;
|
305 |
+
margin-top: 20px;
|
306 |
+
cursor: pointer;
|
307 |
+
border-radius: 5px;
|
308 |
+
}
|
309 |
+
|
310 |
+
#generate-ai-report:hover {
|
311 |
+
background-color: #2980b9;
|
312 |
+
}
|
313 |
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
|
314 |
+
|
315 |
+
:root {
|
316 |
+
--primary-color: #4e54c8;
|
317 |
+
--secondary-color: #8f94fb;
|
318 |
+
--accent-color: #ff6b6b;
|
319 |
+
--text-color: #333;
|
320 |
+
--bg-color: #f9f9f9;
|
321 |
+
}
|
322 |
+
|
323 |
+
body {
|
324 |
+
font-family: 'Poppins', sans-serif;
|
325 |
+
margin: 0;
|
326 |
+
padding: 0;
|
327 |
+
background-color: var(--bg-color);
|
328 |
+
color: var(--text-color);
|
329 |
+
line-height: 1.6;
|
330 |
+
}
|
331 |
+
|
332 |
+
.container {
|
333 |
+
max-width: 1340px;
|
334 |
+
margin: 0 auto;
|
335 |
+
padding: 0 20px;
|
336 |
+
}
|
337 |
+
|
338 |
+
header {
|
339 |
+
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
340 |
+
padding: 15px 0;
|
341 |
+
position: sticky;
|
342 |
+
top: 0;
|
343 |
+
z-index: 1000;
|
344 |
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
345 |
+
}
|
346 |
+
|
347 |
+
.header-content {
|
348 |
+
display: flex;
|
349 |
+
justify-content: space-between;
|
350 |
+
align-items: center;
|
351 |
+
}
|
352 |
+
|
353 |
+
.logo {
|
354 |
+
font-size: 28px;
|
355 |
+
font-weight: 700;
|
356 |
+
color: #fff;
|
357 |
+
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
358 |
+
}
|
359 |
+
|
360 |
+
.search-bar {
|
361 |
+
flex-grow: 1;
|
362 |
+
margin: 0 20px;
|
363 |
+
position: relative;
|
364 |
+
}
|
365 |
+
|
366 |
+
.search-bar input {
|
367 |
+
width: 100%;
|
368 |
+
padding: 12px 20px;
|
369 |
+
border: none;
|
370 |
+
border-radius: 30px;
|
371 |
+
font-size: 16px;
|
372 |
+
background-color: rgba(255,255,255,0.2);
|
373 |
+
color: #fff;
|
374 |
+
transition: all 0.3s ease;
|
375 |
+
}
|
376 |
+
|
377 |
+
.search-bar input::placeholder {
|
378 |
+
color: rgba(255,255,255,0.7);
|
379 |
+
}
|
380 |
+
|
381 |
+
.search-bar input:focus {
|
382 |
+
background-color: rgba(255,255,255,0.3);
|
383 |
+
outline: none;
|
384 |
+
}
|
385 |
+
|
386 |
+
.ai-tools {
|
387 |
+
position: absolute;
|
388 |
+
right: 10px;
|
389 |
+
top: 50%;
|
390 |
+
transform: translateY(-50%);
|
391 |
+
}
|
392 |
+
|
393 |
+
.ai-tools i {
|
394 |
+
font-size: 20px;
|
395 |
+
margin-left: 15px;
|
396 |
+
cursor: pointer;
|
397 |
+
color: #fff;
|
398 |
+
transition: all 0.3s ease;
|
399 |
+
}
|
400 |
+
|
401 |
+
.ai-tools i:hover {
|
402 |
+
color: var(--accent-color);
|
403 |
+
transform: scale(1.1);
|
404 |
+
}
|
405 |
+
|
406 |
+
.user-actions {
|
407 |
+
display: flex;
|
408 |
+
align-items: center;
|
409 |
+
}
|
410 |
+
|
411 |
+
.points-display {
|
412 |
+
font-size: 18px;
|
413 |
+
font-weight: bold;
|
414 |
+
color: #fff;
|
415 |
+
margin-right: 20px;
|
416 |
+
background-color: rgba(255,255,255,0.2);
|
417 |
+
padding: 5px 15px;
|
418 |
+
border-radius: 20px;
|
419 |
+
}
|
420 |
+
|
421 |
+
.profile-icon {
|
422 |
+
width: 40px;
|
423 |
+
height: 40px;
|
424 |
+
border-radius: 50%;
|
425 |
+
background-color: var(--accent-color);
|
426 |
+
display: flex;
|
427 |
+
align-items: center;
|
428 |
+
justify-content: center;
|
429 |
+
font-weight: bold;
|
430 |
+
color: #fff;
|
431 |
+
cursor: pointer;
|
432 |
+
transition: all 0.3s ease;
|
433 |
+
}
|
434 |
+
|
435 |
+
.profile-icon:hover {
|
436 |
+
transform: scale(1.1);
|
437 |
+
}
|
438 |
+
|
439 |
+
.nav-bar {
|
440 |
+
background-color: #fff;
|
441 |
+
padding: 10px 0;
|
442 |
+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
443 |
+
}
|
444 |
+
|
445 |
+
.nav-bar ul {
|
446 |
+
list-style-type: none;
|
447 |
+
margin: 0;
|
448 |
+
padding: 0;
|
449 |
+
display: flex;
|
450 |
+
justify-content: center;
|
451 |
+
}
|
452 |
+
|
453 |
+
.nav-bar li {
|
454 |
+
margin: 0 15px;
|
455 |
+
}
|
456 |
+
|
457 |
+
.nav-bar a {
|
458 |
+
text-decoration: none;
|
459 |
+
color: var(--text-color);
|
460 |
+
font-weight: 600;
|
461 |
+
transition: all 0.3s ease;
|
462 |
+
}
|
463 |
+
|
464 |
+
.nav-bar a:hover {
|
465 |
+
color: var(--primary-color);
|
466 |
+
}
|
467 |
+
|
468 |
+
.hero {
|
469 |
+
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
470 |
+
padding: 25px 0;
|
471 |
+
text-align: center;
|
472 |
+
color: #fff;
|
473 |
+
position: relative;
|
474 |
+
overflow: hidden;
|
475 |
+
}
|
476 |
+
|
477 |
+
.hero::before {
|
478 |
+
content: '';
|
479 |
+
position: absolute;
|
480 |
+
top: 0;
|
481 |
+
left: 0;
|
482 |
+
right: 0;
|
483 |
+
bottom: 0;
|
484 |
+
background: url('https://source.unsplash.com/random/1600x900?education') no-repeat center center;
|
485 |
+
background-size: cover;
|
486 |
+
opacity: 0.1;
|
487 |
+
z-index: 0;
|
488 |
+
}
|
489 |
+
|
490 |
+
.hero-content {
|
491 |
+
position: relative;
|
492 |
+
z-index: 1;
|
493 |
+
}
|
494 |
+
|
495 |
+
.hero h1 {
|
496 |
+
font-size: 48px;
|
497 |
+
margin-bottom: 20px;
|
498 |
+
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
499 |
+
}
|
500 |
+
|
501 |
+
.hero p {
|
502 |
+
font-size: 20px;
|
503 |
+
margin-bottom: 30px;
|
504 |
+
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
|
505 |
+
}
|
506 |
+
|
507 |
+
.btn {
|
508 |
+
display: inline-block;
|
509 |
+
background-color: var(--accent-color);
|
510 |
+
color: #fff;
|
511 |
+
padding: 12px 30px;
|
512 |
+
text-decoration: none;
|
513 |
+
font-weight: 600;
|
514 |
+
border-radius: 30px;
|
515 |
+
transition: all 0.3s ease;
|
516 |
+
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
517 |
+
}
|
518 |
+
|
519 |
+
.btn:hover {
|
520 |
+
background-color: #ff4757;
|
521 |
+
transform: translateY(-3px);
|
522 |
+
}
|
523 |
+
|
524 |
+
.categories, .features, .learning-section {
|
525 |
+
padding: 60px 0;
|
526 |
+
background-color: #fff;
|
527 |
+
margin: 40px 0;
|
528 |
+
border-radius: 10px;
|
529 |
+
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
530 |
+
}
|
531 |
+
|
532 |
+
.section-title {
|
533 |
+
font-size: 32px;
|
534 |
+
text-align: center;
|
535 |
+
margin-bottom: 40px;
|
536 |
+
color: var(--primary-color);
|
537 |
+
}
|
538 |
+
|
539 |
+
.category-list, .feature-grid, .learning-grid {
|
540 |
+
display: grid;
|
541 |
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
542 |
+
gap: 30px;
|
543 |
+
}
|
544 |
+
|
545 |
+
.category-item, .feature-card, .learning-item {
|
546 |
+
background-color: #fff;
|
547 |
+
border-radius: 10px;
|
548 |
+
padding: 20px;
|
549 |
+
text-align: center;
|
550 |
+
transition: all 0.3s ease;
|
551 |
+
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
552 |
+
}
|
553 |
+
|
554 |
+
.category-item:hover, .feature-card:hover, .learning-item:hover {
|
555 |
+
transform: translateY(-10px);
|
556 |
+
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
|
557 |
+
}
|
558 |
+
|
559 |
+
.feature-grid {
|
560 |
+
display: grid;
|
561 |
+
grid-template-columns: repeat(3, 1fr);
|
562 |
+
grid-gap: 20px;
|
563 |
+
}
|
564 |
+
|
565 |
+
.feature-card {
|
566 |
+
background: #fff;
|
567 |
+
border: 1px solid #ddd;
|
568 |
+
border-radius: 8px;
|
569 |
+
padding: 20px;
|
570 |
+
text-align: center;
|
571 |
+
}
|
572 |
+
|
573 |
+
.feature-card img {
|
574 |
+
max-width: 100%;
|
575 |
+
border-radius: 8px;
|
576 |
+
margin-bottom: 15px;
|
577 |
+
}
|
578 |
+
.search-bar {
|
579 |
+
flex-grow: 1;
|
580 |
+
margin: 0 20px;
|
581 |
+
position: relative;
|
582 |
+
max-width: 900px;
|
583 |
+
}
|
584 |
+
.profile-sidebar {
|
585 |
+
display: none;
|
586 |
+
position: fixed;
|
587 |
+
top: 0;
|
588 |
+
right: 0;
|
589 |
+
width: 300px;
|
590 |
+
height: 100%;
|
591 |
+
background-color: #fff;
|
592 |
+
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
|
593 |
+
padding: 20px;
|
594 |
+
overflow-y: auto;
|
595 |
+
}
|
596 |
+
|
597 |
+
.feature-card h3 {
|
598 |
+
margin: 10px 0;
|
599 |
+
}
|
600 |
+
|
601 |
+
.feature-card p {
|
602 |
+
margin: 10px 0 20px;
|
603 |
+
}
|
604 |
+
|
605 |
+
.feature-card .btn {
|
606 |
+
display: inline-block;
|
607 |
+
padding: 10px 20px;
|
608 |
+
background-color: #007BFF;
|
609 |
+
color: #fff;
|
610 |
+
text-decoration: none;
|
611 |
+
border-radius: 4px;
|
612 |
+
}
|
613 |
+
#subjects-container {
|
614 |
+
max-width: 600px;
|
615 |
+
margin: 0 auto; /* Center the container horizontally */
|
616 |
+
padding: 30px;
|
617 |
+
background: var(--card-background);
|
618 |
+
border-radius: 15px;
|
619 |
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
620 |
+
display: flex;
|
621 |
+
flex-direction: column;
|
622 |
+
align-items: center; /* Center the items horizontally */
|
623 |
+
gap: 30px; /* Add space between the items */
|
624 |
+
}
|
625 |
+
|
626 |
+
#subjects-container h3 {
|
627 |
+
font-size: 1.8em;
|
628 |
+
color: var(--primary-color);
|
629 |
+
margin-bottom: 20px;
|
630 |
+
text-align: center;
|
631 |
+
}
|
632 |
+
|
633 |
+
.subject-card {
|
634 |
+
background: var(--card-background);
|
635 |
+
border-radius: 10px;
|
636 |
+
padding: 20px;
|
637 |
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
638 |
+
transition: transform 0.3s ease;
|
639 |
+
text-align: center;
|
640 |
+
width: 100%;
|
641 |
+
}
|
642 |
+
|
643 |
+
.subject-card:hover {
|
644 |
+
transform: translateY(-5px);
|
645 |
+
}
|
646 |
+
|
647 |
+
.subject-card h4 {
|
648 |
+
font-size: 1.5em;
|
649 |
+
color: var(--primary-color);
|
650 |
+
margin-bottom: 15px;
|
651 |
+
}
|
652 |
+
|
653 |
+
.subject-card p {
|
654 |
+
font-size: 1em;
|
655 |
+
color: var(--secondary-color);
|
656 |
+
margin: 0;
|
657 |
+
}
|
658 |
+
|
659 |
+
.spinner {
|
660 |
+
text-align: center;
|
661 |
+
margin-top: 20px;
|
662 |
+
}
|
663 |
+
.spinner-border {
|
664 |
+
width: 3rem;
|
665 |
+
height: 3rem;
|
666 |
+
border: 5px solid #f3f3f3;
|
667 |
+
border-top: 5px solid #3498db;
|
668 |
+
border-radius: 50%;
|
669 |
+
animation: spin 1s linear infinite;
|
670 |
+
}
|
671 |
+
@keyframes spin {
|
672 |
+
0% { transform: rotate(0deg); }
|
673 |
+
100% { transform: rotate(360deg); }
|
674 |
+
}
|
675 |
+
|
676 |
+
.timetable-container {
|
677 |
+
display: flex;
|
678 |
+
flex-wrap: wrap;
|
679 |
+
justify-content: space-around;
|
680 |
+
gap: 20px;
|
681 |
+
margin-top: 30px;
|
682 |
+
}
|
683 |
+
|
684 |
+
.day-table {
|
685 |
+
background-color: #fff;
|
686 |
+
border-radius: 10px;
|
687 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
688 |
+
padding: 15px;
|
689 |
+
width: calc(33.33% - 20px);
|
690 |
+
margin-bottom: 20px;
|
691 |
+
}
|
692 |
+
|
693 |
+
.day-table h3 {
|
694 |
+
color: var(--primary-color);
|
695 |
+
margin-top: 0;
|
696 |
+
margin-bottom: 15px;
|
697 |
+
text-align: center;
|
698 |
+
}
|
699 |
+
|
700 |
+
.day-table table {
|
701 |
+
width: 100%;
|
702 |
+
border-collapse: collapse;
|
703 |
+
}
|
704 |
+
|
705 |
+
.day-table th, .day-table td {
|
706 |
+
border: 1px solid #ddd;
|
707 |
+
padding: 8px;
|
708 |
+
text-align: left;
|
709 |
+
}
|
710 |
+
|
711 |
+
.day-table th {
|
712 |
+
background-color: #f2f2f2;
|
713 |
+
}
|
714 |
+
|
715 |
+
@media (max-width: 768px) {
|
716 |
+
.day-table {
|
717 |
+
width: 100%;
|
718 |
+
}
|
719 |
+
} .timetable-container {
|
720 |
+
display: flex;
|
721 |
+
flex-wrap: wrap;
|
722 |
+
justify-content: space-around;
|
723 |
+
gap: 20px;
|
724 |
+
margin-top: 30px;
|
725 |
+
}
|
726 |
+
|
727 |
+
.day-table {
|
728 |
+
background-color: #fff;
|
729 |
+
border-radius: 10px;
|
730 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
731 |
+
padding: 15px;
|
732 |
+
width: calc(33.33% - 20px);
|
733 |
+
margin-bottom: 20px;
|
734 |
+
}
|
735 |
+
html {
|
736 |
+
scroll-behavior: smooth;
|
737 |
+
}
|
738 |
+
|
739 |
+
.day-table h3 {
|
740 |
+
color: var(--primary-color);
|
741 |
+
margin-top: 0;
|
742 |
+
margin-bottom: 15px;
|
743 |
+
text-align: center;
|
744 |
+
}
|
745 |
+
|
746 |
+
.day-table table {
|
747 |
+
width: 100%;
|
748 |
+
border-collapse: collapse;
|
749 |
+
}
|
750 |
+
.loading-circle {
|
751 |
+
display: none;
|
752 |
+
width: 20px;
|
753 |
+
height: 20px;
|
754 |
+
border: 3px solid #f3f3f3;
|
755 |
+
border-top: 3px solid #3498db;
|
756 |
+
border-radius: 50%;
|
757 |
+
animation: spin 1s linear infinite;
|
758 |
+
margin-left: 10px;
|
759 |
+
}
|
760 |
+
|
761 |
+
@keyframes spin {
|
762 |
+
0% { transform: rotate(0deg); }
|
763 |
+
100% { transform: rotate(360deg); }
|
764 |
+
}
|
765 |
+
|
766 |
+
.day-table th, .day-table td {
|
767 |
+
border: 1px solid #ddd;
|
768 |
+
padding: 8px;
|
769 |
+
text-align: left;
|
770 |
+
}
|
771 |
+
|
772 |
+
.day-table th {
|
773 |
+
background-color: #f2f2f2;
|
774 |
+
}
|
775 |
+
|
776 |
+
@media (max-width: 768px) {
|
777 |
+
.day-table {
|
778 |
+
width: 100%;
|
779 |
+
}
|
780 |
+
}
|
781 |
+
|
782 |
+
@media (max-width: 768px) {
|
783 |
+
.feature-grid {
|
784 |
+
grid-template-columns: 1fr;
|
785 |
+
}
|
786 |
+
}
|
787 |
+
|
788 |
+
</style>
|
789 |
+
</head>
|
790 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
791 |
+
<body>
|
792 |
+
<header>
|
793 |
+
<div class="container">
|
794 |
+
<div class="header-content">
|
795 |
+
<div class="logo">SmartLearn</div>
|
796 |
+
<div class="search-bar">
|
797 |
+
<input type="text" placeholder="Search for anything">
|
798 |
+
<div class="ai-tools">
|
799 |
+
<i class="fas fa-camera" title="Photo Question Answering"></i>
|
800 |
+
<i class="fas fa-brain" title="AI Tutor"></i>
|
801 |
+
<i class="fas fa-robot" title="AI Assistant"></i>
|
802 |
+
</div>
|
803 |
+
</div>
|
804 |
+
<div class="user-actions">
|
805 |
+
|
806 |
+
<div class="profile-icon" id="profile-icon">{{ teacher.name[0] }}</div>
|
807 |
+
|
808 |
+
<div id="profile-sidebar" class="profile-sidebar">
|
809 |
+
<button id="close-profile" class="close-button">×</button>
|
810 |
+
|
811 |
+
<div class="profile-header">
|
812 |
+
<img src="https://via.placeholder.com/150" alt="Teacher Avatar" class="avatar">
|
813 |
+
<h2>{{ teacher.name }}</h2>
|
814 |
+
<p>Teacher ID: {{ teacher.id }}</p>
|
815 |
+
</div>
|
816 |
+
|
817 |
+
<div class="profile-info">
|
818 |
+
<p><strong>School:</strong> {{ teacher.school }}</p>
|
819 |
+
<p><strong>Date of Birth:</strong> {{ teacher.dob }}</p>
|
820 |
+
<p><strong>Email:</strong> {{ teacher.email }}</p>
|
821 |
+
</div>
|
822 |
+
|
823 |
+
<div class="subjects">
|
824 |
+
<h3>Subjects Taught</h3>
|
825 |
+
<ul>
|
826 |
+
{% for subject in teacher.subjects_taught %}
|
827 |
+
<li>{{ subject }}</li>
|
828 |
+
{% endfor %}
|
829 |
+
</ul>
|
830 |
+
|
831 |
+
<h3>Classes</h3>
|
832 |
+
<ul>
|
833 |
+
{% for class in teacher.classes %}
|
834 |
+
<li>{{ class }}</li>
|
835 |
+
{% endfor %}
|
836 |
+
</ul>
|
837 |
+
</div>
|
838 |
+
|
839 |
+
<div class="performance-graph">
|
840 |
+
<h3>Weekly Class Performance</h3>
|
841 |
+
<canvas id="performanceChart"></canvas>
|
842 |
+
</div>
|
843 |
+
|
844 |
+
<div class="additional-info">
|
845 |
+
<h3>Qualifications</h3>
|
846 |
+
<ul>
|
847 |
+
{% for qualification in teacher.qualifications %}
|
848 |
+
<li>{{ qualification }}</li>
|
849 |
+
{% endfor %}
|
850 |
+
</ul>
|
851 |
+
|
852 |
+
<h3>Years of Experience</h3>
|
853 |
+
<p>{{ teacher.years_of_experience }}</p>
|
854 |
+
</div>
|
855 |
+
|
856 |
+
<a href="{{ url_for('index') }}" style="color: #ff4757; text-align: center;"><h2>Log out</h2></a>
|
857 |
+
</div>
|
858 |
+
|
859 |
+
</header>
|
860 |
+
|
861 |
+
<nav class="nav-bar">
|
862 |
+
<ul>
|
863 |
+
<li><a href="{{ url_for('teacher') }}"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
|
864 |
+
<li><a href="{{ url_for('generate_paper') }}"><i class="fas fa-file-alt"></i> Generate Paper</a></li>
|
865 |
+
<li><a href="{{ url_for('eval') }}"><i class="fas fa-check-circle"></i> Evaluate</a></li>
|
866 |
+
<li><a href="#student-list"><i class="fas fa-chart-bar"></i> Generate Report</a></li>
|
867 |
+
<li><a href="#timetable-generator"><i class="fas fa-calendar-alt"></i> Generate Timetable</a></li>
|
868 |
+
<li><a href="{{ url_for('ai_timetable') }}"><i class="fas fa-calendar-alt"></i>Slow Learner</a></li>
|
869 |
+
</ul>
|
870 |
+
</nav>
|
871 |
+
|
872 |
+
|
873 |
+
<div class="teacher-portal fade-in">
|
874 |
+
<div class="header">
|
875 |
+
<h1>Teacher Portal</h1>
|
876 |
+
<p>Welcome, <span id="teacher-name-display"></span>!</p>
|
877 |
+
</div>
|
878 |
+
<div class="dashboard">
|
879 |
+
<div class="dashboard-card">
|
880 |
+
<i class="fas fa-user-graduate"></i>
|
881 |
+
<h3>Total Students</h3>
|
882 |
+
<p id="total-students"></p>
|
883 |
+
</div>
|
884 |
+
<div class="dashboard-card">
|
885 |
+
<i class="fas fa-chart-line"></i>
|
886 |
+
<h3>Average CGPA</h3>
|
887 |
+
<p id="average-cgpa"></p>
|
888 |
+
</div>
|
889 |
+
<div class="dashboard-card">
|
890 |
+
<i class="fas fa-clipboard-check"></i>
|
891 |
+
<h3>Average AI Test Score</h3>
|
892 |
+
<p id="average-ai-score"></p>
|
893 |
+
</div>
|
894 |
+
</div>
|
895 |
+
<div id="student-list">
|
896 |
+
<h3>Student List</h3>
|
897 |
+
<div class="student-grid" id="student-grid"></div>
|
898 |
+
</div>
|
899 |
+
<div id="student-details" class="modal">
|
900 |
+
<div class="modal-content">
|
901 |
+
<span class="close">×</span>
|
902 |
+
<div id="student-expanded-info"></div>
|
903 |
+
<button id="generate-ai-report">Generate AI Report</button>
|
904 |
+
</div>
|
905 |
+
</div>
|
906 |
+
<div class="button-container">
|
907 |
+
<button onclick="window.location.href='index.html'">Back to Home</button>
|
908 |
+
</div>
|
909 |
+
<div id="timetable-generator">
|
910 |
+
<h3>Generate Timetable</h3>
|
911 |
+
<form id="timetable-form">
|
912 |
+
<label for="hours-per-day">Hours per Day:</label>
|
913 |
+
<input type="number" id="hours-per-day" name="hours_per_day" required>
|
914 |
+
|
915 |
+
<label for="days-per-week">Days per Week:</label>
|
916 |
+
<input type="number" id="days-per-week" name="days_per_week" required>
|
917 |
+
|
918 |
+
<label for="semester-end-date">Semester End Date:</label>
|
919 |
+
<input type="date" id="semester-end-date" name="semester_end_date" required>
|
920 |
+
|
921 |
+
<label for="number-of-subjects">Number of Subjects:</label>
|
922 |
+
<input type="number" id="number-of-subjects" name="number_of_subjects" required>
|
923 |
+
|
924 |
+
<div id="subjects-container">
|
925 |
+
<!-- Subject inputs will be added here dynamically -->
|
926 |
+
</div>
|
927 |
+
<button type="submit">Generate Timetable</button>
|
928 |
+
<div id="timetable-spinner" class="spinner"></div>
|
929 |
+
</form>
|
930 |
+
<div id="timetable-result"></div>
|
931 |
+
</div>
|
932 |
+
</div>
|
933 |
+
|
934 |
+
<script>
|
935 |
+
document.addEventListener('DOMContentLoaded', function() {
|
936 |
+
const teacherName = localStorage.getItem('teacherName');
|
937 |
+
document.getElementById('teacher-name-display').textContent = teacherName || 'Teacher';
|
938 |
+
|
939 |
+
const studentGrid = document.getElementById('student-grid');
|
940 |
+
const studentDetails = document.getElementById('student-details');
|
941 |
+
const studentExpandedInfo = document.getElementById('student-expanded-info');
|
942 |
+
const closeBtn = document.querySelector('.close');
|
943 |
+
const generateAIReportBtn = document.getElementById('generate-ai-report');
|
944 |
+
|
945 |
+
fetch('/get_students')
|
946 |
+
.then(response => response.json())
|
947 |
+
.then(students => {
|
948 |
+
let totalCGPA = 0;
|
949 |
+
let totalAIScore = 0;
|
950 |
+
|
951 |
+
students.forEach(student => {
|
952 |
+
const studentCard = document.createElement('div');
|
953 |
+
studentCard.className = 'student-card';
|
954 |
+
studentCard.innerHTML = `
|
955 |
+
<h4>${student.name}</h4>
|
956 |
+
<p>Age: ${student.age}</p>
|
957 |
+
<p>CGPA: ${student.cgpa}</p>
|
958 |
+
<p>Course: ${student.course_pursuing}</p>
|
959 |
+
<p>Assigned Test Score: ${student.assigned_test_score}</p>
|
960 |
+
`;
|
961 |
+
studentCard.addEventListener('click', () => showStudentDetails(student));
|
962 |
+
studentGrid.appendChild(studentCard);
|
963 |
+
|
964 |
+
totalCGPA += student.cgpa;
|
965 |
+
totalAIScore += student.ai_test_score;
|
966 |
+
});
|
967 |
+
|
968 |
+
const totalStudents = students.length;
|
969 |
+
const averageCGPA = totalStudents > 0 ? totalCGPA / totalStudents : 0;
|
970 |
+
const averageAIScore = totalStudents > 0 ? totalAIScore / totalStudents : 0;
|
971 |
+
|
972 |
+
document.getElementById('total-students').textContent = totalStudents;
|
973 |
+
document.getElementById('average-cgpa').textContent = averageCGPA.toFixed(2);
|
974 |
+
document.getElementById('average-ai-score').textContent = averageAIScore.toFixed(2);
|
975 |
+
})
|
976 |
+
.catch(error => {
|
977 |
+
console.error('Error fetching student data:', error);
|
978 |
+
});
|
979 |
+
|
980 |
+
function showStudentDetails(student) {
|
981 |
+
studentExpandedInfo.innerHTML = `
|
982 |
+
<h2>${student.name}</h2>
|
983 |
+
<p>Age: ${student.age}</p>
|
984 |
+
<p>CGPA: ${student.cgpa}</p>
|
985 |
+
<p>Course: ${student.course_pursuing}</p>
|
986 |
+
<p>Assigned Test Score: ${student.assigned_test_score}</p>
|
987 |
+
<p>AI Test Score: ${student.ai_test_score}</p>
|
988 |
+
<p>Interests: ${student.interests}</p>
|
989 |
+
<p>Difficulty in: ${student.difficulty_in}</p>
|
990 |
+
<p>Courses Taken: ${student.courses_taken}</p>
|
991 |
+
`;
|
992 |
+
studentExpandedInfo.dataset.studentData = JSON.stringify(student);
|
993 |
+
studentDetails.style.display = 'block';
|
994 |
+
}
|
995 |
+
|
996 |
+
closeBtn.onclick = function() {
|
997 |
+
studentDetails.style.display = 'none';
|
998 |
+
}
|
999 |
+
|
1000 |
+
generateAIReportBtn.onclick = function() {
|
1001 |
+
const studentData = JSON.parse(studentExpandedInfo.dataset.studentData);
|
1002 |
+
|
1003 |
+
// Create and append loading circle
|
1004 |
+
const loadingCircle = document.createElement('div');
|
1005 |
+
loadingCircle.className = 'loading-circle';
|
1006 |
+
this.appendChild(loadingCircle);
|
1007 |
+
|
1008 |
+
// Show loading circle
|
1009 |
+
loadingCircle.style.display = 'inline-block';
|
1010 |
+
|
1011 |
+
// Disable the button while loading
|
1012 |
+
this.disabled = true;
|
1013 |
+
|
1014 |
+
fetch('/generate_report', {
|
1015 |
+
method: 'POST',
|
1016 |
+
headers: {
|
1017 |
+
'Content-Type': 'application/json',
|
1018 |
+
},
|
1019 |
+
body: JSON.stringify(studentData),
|
1020 |
+
})
|
1021 |
+
.then(response => response.json())
|
1022 |
+
.then(data => {
|
1023 |
+
const reportDiv = document.createElement('div');
|
1024 |
+
reportDiv.innerHTML = `<h3>AI Generated Report</h3><p>${data.report}</p>`;
|
1025 |
+
studentExpandedInfo.appendChild(reportDiv);
|
1026 |
+
})
|
1027 |
+
.catch((error) => {
|
1028 |
+
console.error('Error:', error);
|
1029 |
+
alert('Error generating AI report');
|
1030 |
+
})
|
1031 |
+
.finally(() => {
|
1032 |
+
// Hide loading circle
|
1033 |
+
loadingCircle.style.display = 'none';
|
1034 |
+
|
1035 |
+
// Re-enable the button
|
1036 |
+
this.disabled = false;
|
1037 |
+
|
1038 |
+
// Remove the loading circle from the DOM
|
1039 |
+
this.removeChild(loadingCircle);
|
1040 |
+
});
|
1041 |
+
};
|
1042 |
+
window.onclick = function(event) {
|
1043 |
+
if (event.target == studentDetails) {
|
1044 |
+
studentDetails.style.display = 'none';
|
1045 |
+
}
|
1046 |
+
}
|
1047 |
+
|
1048 |
+
const timetableForm = document.getElementById('timetable-form');
|
1049 |
+
const timetableResult = document.getElementById('timetable-result');
|
1050 |
+
|
1051 |
+
const numberOfSubjectsInput = document.getElementById('number-of-subjects');
|
1052 |
+
numberOfSubjectsInput.addEventListener('change', function() {
|
1053 |
+
const subjectsContainer = document.getElementById('subjects-container');
|
1054 |
+
subjectsContainer.innerHTML = '';
|
1055 |
+
|
1056 |
+
const numberOfSubjects = parseInt(this.value);
|
1057 |
+
for (let i = 0; i < numberOfSubjects; i++) {
|
1058 |
+
const subjectLabel = document.createElement('label');
|
1059 |
+
subjectLabel.textContent = `Subject ${i + 1}:`;
|
1060 |
+
const subjectInput = document.createElement('input');
|
1061 |
+
subjectInput.type = 'text';
|
1062 |
+
subjectInput.name = `subject_${i + 1}`;
|
1063 |
+
subjectInput.required = true;
|
1064 |
+
|
1065 |
+
subjectsContainer.appendChild(subjectLabel);
|
1066 |
+
subjectsContainer.appendChild(subjectInput);
|
1067 |
+
}
|
1068 |
+
});
|
1069 |
+
|
1070 |
+
timetableForm.addEventListener('submit', function(e) {
|
1071 |
+
e.preventDefault();
|
1072 |
+
const formData = new FormData(timetableForm);
|
1073 |
+
const subjects = [];
|
1074 |
+
for (let [key, value] of formData.entries()) {
|
1075 |
+
if (key.startsWith('subject_')) {
|
1076 |
+
subjects.push(value);
|
1077 |
+
}
|
1078 |
+
}
|
1079 |
+
const timetableData = {
|
1080 |
+
hours_per_day: formData.get('hours_per_day'),
|
1081 |
+
days_per_week: formData.get('days_per_week'),
|
1082 |
+
semester_end_date: formData.get('semester_end_date'),
|
1083 |
+
subjects: subjects
|
1084 |
+
};
|
1085 |
+
|
1086 |
+
// Show the loading spinner
|
1087 |
+
document.getElementById('loading-spinner').style.display = 'block';
|
1088 |
+
timetableResult.textContent = '';
|
1089 |
+
|
1090 |
+
fetch('/generate-timetable', {
|
1091 |
+
method: 'POST',
|
1092 |
+
headers: {
|
1093 |
+
'Content-Type': 'application/json'
|
1094 |
+
},
|
1095 |
+
body: JSON.stringify(timetableData)
|
1096 |
+
})
|
1097 |
+
.then(response => response.json())
|
1098 |
+
.then(data => {
|
1099 |
+
// Hide the loading spinner
|
1100 |
+
document.getElementById('loading-spinner').style.display = 'none';
|
1101 |
+
|
1102 |
+
if (data.error) {
|
1103 |
+
timetableResult.textContent = 'Error: ' + data.error;
|
1104 |
+
} else {
|
1105 |
+
timetableResult.textContent = data.timetable;
|
1106 |
+
}
|
1107 |
+
})
|
1108 |
+
.catch(error => {
|
1109 |
+
// Hide the loading spinner
|
1110 |
+
document.getElementById('loading-spinner').style.display = 'none';
|
1111 |
+
timetableResult.textContent = 'Error: ' + error.message;
|
1112 |
+
});
|
1113 |
+
});
|
1114 |
+
});
|
1115 |
+
|
1116 |
+
document.addEventListener('DOMContentLoaded', function() {
|
1117 |
+
const timetableForm = document.getElementById('timetable-form');
|
1118 |
+
const timetableResult = document.getElementById('timetable-result');
|
1119 |
+
const generateButton = document.getElementById('generate-timetable-btn');
|
1120 |
+
const loadingSpinner = document.getElementById('loading-spinner');
|
1121 |
+
|
1122 |
+
timetableForm.addEventListener('submit', function(e) {
|
1123 |
+
e.preventDefault();
|
1124 |
+
const formData = new FormData(timetableForm);
|
1125 |
+
const subjects = [];
|
1126 |
+
for (let [key, value] of formData.entries()) {
|
1127 |
+
if (key.startsWith('subject_')) {
|
1128 |
+
subjects.push(value);
|
1129 |
+
}
|
1130 |
+
}
|
1131 |
+
const timetableData = {
|
1132 |
+
hours_per_day: formData.get('hours_per_day'),
|
1133 |
+
days_per_week: formData.get('days_per_week'),
|
1134 |
+
semester_end_date: formData.get('semester_end_date'),
|
1135 |
+
subjects: subjects
|
1136 |
+
};
|
1137 |
+
|
1138 |
+
// Show the loading spinner
|
1139 |
+
loadingSpinner.style.display = 'block';
|
1140 |
+
timetableResult.textContent = '';
|
1141 |
+
|
1142 |
+
// Scroll to the loading spinner
|
1143 |
+
loadingSpinner.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
1144 |
+
|
1145 |
+
fetch('/generate-timetable', {
|
1146 |
+
method: 'POST',
|
1147 |
+
headers: {
|
1148 |
+
'Content-Type': 'application/json'
|
1149 |
+
},
|
1150 |
+
body: JSON.stringify(timetableData)
|
1151 |
+
})
|
1152 |
+
.then(response => response.json())
|
1153 |
+
.then(data => {
|
1154 |
+
// Hide the loading spinner
|
1155 |
+
loadingSpinner.style.display = 'none';
|
1156 |
+
|
1157 |
+
if (data.error) {
|
1158 |
+
timetableResult.textContent = 'Error: ' + data.error;
|
1159 |
+
} else {
|
1160 |
+
timetableResult.textContent = data.timetable;
|
1161 |
+
}
|
1162 |
+
|
1163 |
+
// Scroll to the result
|
1164 |
+
timetableResult.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
1165 |
+
})
|
1166 |
+
.catch(error => {
|
1167 |
+
// Hide the loading spinner
|
1168 |
+
loadingSpinner.style.display = 'none';
|
1169 |
+
timetableResult.textContent = 'Error: ' + error.message;
|
1170 |
+
|
1171 |
+
// Scroll to the error message
|
1172 |
+
timetableResult.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
1173 |
+
});
|
1174 |
+
});
|
1175 |
+
});
|
1176 |
+
|
1177 |
+
</script>
|
1178 |
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
1179 |
+
<script src="static/profile.js"></script>
|
1180 |
+
<script>
|
1181 |
+
document.addEventListener('DOMContentLoaded', function() {
|
1182 |
+
const profileIcon = document.getElementById('profile-icon');
|
1183 |
+
const profileSidebar = document.getElementById('profile-sidebar');
|
1184 |
+
const closeProfile = document.getElementById('close-profile');
|
1185 |
+
|
1186 |
+
profileIcon.addEventListener('click', function() {
|
1187 |
+
profileSidebar.style.display = 'block';
|
1188 |
+
});
|
1189 |
+
|
1190 |
+
closeProfile.addEventListener('click', function() {
|
1191 |
+
profileSidebar.style.display = 'none';
|
1192 |
+
});
|
1193 |
+
});
|
1194 |
+
</script>
|
1195 |
+
<script>
|
1196 |
+
document.addEventListener('DOMContentLoaded', function() {
|
1197 |
+
const profileIcon = document.getElementById('profile-icon');
|
1198 |
+
const profileSidebar = document.getElementById('profile-sidebar');
|
1199 |
+
const closeProfile = document.getElementById('close-profile');
|
1200 |
+
|
1201 |
+
profileIcon.addEventListener('click', function() {
|
1202 |
+
profileSidebar.classList.add('active');
|
1203 |
+
renderPerformanceChart();
|
1204 |
+
});
|
1205 |
+
|
1206 |
+
closeProfile.addEventListener('click', function() {
|
1207 |
+
profileSidebar.classList.remove('active');
|
1208 |
+
});
|
1209 |
+
|
1210 |
+
function renderPerformanceChart() {
|
1211 |
+
const ctx = document.getElementById('performanceChart').getContext('2d');
|
1212 |
+
|
1213 |
+
// Sample data
|
1214 |
+
const data = {
|
1215 |
+
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
|
1216 |
+
datasets: [{
|
1217 |
+
label: 'Performance Score',
|
1218 |
+
data: [65, 72, 68, 80, 75, 85],
|
1219 |
+
fill: false,
|
1220 |
+
borderColor: 'rgb(75, 192, 192)',
|
1221 |
+
tension: 0.1,
|
1222 |
+
pointBackgroundColor: 'rgb(75, 192, 192)',
|
1223 |
+
pointBorderColor: '#fff',
|
1224 |
+
pointHoverBackgroundColor: '#fff',
|
1225 |
+
pointHoverBorderColor: 'rgb(75, 192, 192)'
|
1226 |
+
}]
|
1227 |
+
};
|
1228 |
+
|
1229 |
+
const config = {
|
1230 |
+
type: 'line',
|
1231 |
+
data: data,
|
1232 |
+
options: {
|
1233 |
+
responsive: true,
|
1234 |
+
plugins: {
|
1235 |
+
title: {
|
1236 |
+
display: true,
|
1237 |
+
text: 'Weekly Performance'
|
1238 |
+
},
|
1239 |
+
legend: {
|
1240 |
+
position: 'bottom',
|
1241 |
+
}
|
1242 |
+
},
|
1243 |
+
scales: {
|
1244 |
+
y: {
|
1245 |
+
beginAtZero: true,
|
1246 |
+
max: 100,
|
1247 |
+
title: {
|
1248 |
+
display: true,
|
1249 |
+
text: 'Score'
|
1250 |
+
}
|
1251 |
+
},
|
1252 |
+
x: {
|
1253 |
+
title: {
|
1254 |
+
display: true,
|
1255 |
+
text: 'Week'
|
1256 |
+
}
|
1257 |
+
}
|
1258 |
+
}
|
1259 |
+
}
|
1260 |
+
};
|
1261 |
+
|
1262 |
+
new Chart(ctx, config);
|
1263 |
+
}
|
1264 |
+
});
|
1265 |
+
|
1266 |
+
</script>
|
1267 |
+
<script>
|
1268 |
+
// Extract weekly performance data from the template
|
1269 |
+
const weeklyPerformanceData = JSON.parse('{{ teacher.weekly_class_performance|tojson|safe }}');
|
1270 |
+
|
1271 |
+
// Prepare data for Chart.js
|
1272 |
+
const ctx = document.getElementById('performanceChart').getContext('2d');
|
1273 |
+
const labels = Object.keys(weeklyPerformanceData);
|
1274 |
+
const datasets = labels.map(label => ({
|
1275 |
+
label: label,
|
1276 |
+
data: weeklyPerformanceData[label],
|
1277 |
+
borderColor: getRandomColor(),
|
1278 |
+
fill: false
|
1279 |
+
}));
|
1280 |
+
|
1281 |
+
const performanceChart = new Chart(ctx, {
|
1282 |
+
type: 'line',
|
1283 |
+
data: {
|
1284 |
+
labels: Array.from({length: 7}, (_, i) => `Week ${i + 1}`),
|
1285 |
+
datasets: datasets
|
1286 |
+
},
|
1287 |
+
options: {
|
1288 |
+
responsive: true,
|
1289 |
+
scales: {
|
1290 |
+
x: {
|
1291 |
+
title: {
|
1292 |
+
display: true,
|
1293 |
+
text: 'Weeks'
|
1294 |
+
}
|
1295 |
+
},
|
1296 |
+
y: {
|
1297 |
+
title: {
|
1298 |
+
display: true,
|
1299 |
+
text: 'Performance Score'
|
1300 |
+
},
|
1301 |
+
beginAtZero: true
|
1302 |
+
}
|
1303 |
+
}
|
1304 |
+
}
|
1305 |
+
});
|
1306 |
+
|
1307 |
+
function getRandomColor() {
|
1308 |
+
const letters = '0123456789ABCDEF';
|
1309 |
+
let color = '#';
|
1310 |
+
for (let i = 0; i < 6; i++) {
|
1311 |
+
color += letters[Math.floor(Math.random() * 16)];
|
1312 |
+
}
|
1313 |
+
return color;
|
1314 |
+
}
|
1315 |
+
</script>
|
1316 |
+
|
1317 |
+
</body>
|
1318 |
+
</html>
|
1319 |
+
|
templates/teacher_eval.html
ADDED
@@ -0,0 +1,304 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Exam Evaluation System</title>
|
7 |
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
|
8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
|
9 |
+
<style>
|
10 |
+
:root {
|
11 |
+
--primary-color: #3498db;
|
12 |
+
--secondary-color: #2c3e50;
|
13 |
+
--background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent for readability */
|
14 |
+
--text-color: #333;
|
15 |
+
--input-bg: #fff;
|
16 |
+
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
17 |
+
}
|
18 |
+
|
19 |
+
body {
|
20 |
+
font-family: 'Roboto', Arial, sans-serif;
|
21 |
+
line-height: 1.6;
|
22 |
+
color: var(--text-color);
|
23 |
+
margin: 0;
|
24 |
+
padding: 0;
|
25 |
+
position: relative;
|
26 |
+
background-color: var(--background-color);
|
27 |
+
}
|
28 |
+
|
29 |
+
.background-video {
|
30 |
+
position: fixed;
|
31 |
+
top: 0;
|
32 |
+
left: 0;
|
33 |
+
width: 100%;
|
34 |
+
height: 100%;
|
35 |
+
object-fit: cover;
|
36 |
+
z-index: -1; /* Make sure the video is behind everything else */
|
37 |
+
}
|
38 |
+
|
39 |
+
.header {
|
40 |
+
background-color: var(--secondary-color);
|
41 |
+
padding: 20px 0;
|
42 |
+
text-align: center;
|
43 |
+
}
|
44 |
+
.back-button {
|
45 |
+
position: fixed;
|
46 |
+
top: 20px;
|
47 |
+
left: 20px;
|
48 |
+
background-color: #3498db;
|
49 |
+
color: white;
|
50 |
+
border: none;
|
51 |
+
border-radius: 50%;
|
52 |
+
width: 50px;
|
53 |
+
height: 50px;
|
54 |
+
font-size: 24px;
|
55 |
+
cursor: pointer;
|
56 |
+
transition: all 0.3s ease;
|
57 |
+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
58 |
+
display: flex;
|
59 |
+
justify-content: center;
|
60 |
+
align-items: center;
|
61 |
+
text-decoration: none;
|
62 |
+
}
|
63 |
+
|
64 |
+
.back-button:hover {
|
65 |
+
background-color: #2980b9;
|
66 |
+
transform: scale(1.1);
|
67 |
+
}
|
68 |
+
|
69 |
+
.back-button i {
|
70 |
+
transition: transform 0.3s ease;
|
71 |
+
}
|
72 |
+
|
73 |
+
.back-button:hover i {
|
74 |
+
transform: translateX(-5px);
|
75 |
+
}
|
76 |
+
|
77 |
+
.logo {
|
78 |
+
display: flex;
|
79 |
+
justify-content: center;
|
80 |
+
align-items: center;
|
81 |
+
margin-bottom: 10px;
|
82 |
+
}
|
83 |
+
|
84 |
+
.logo i {
|
85 |
+
font-size: 2.5em;
|
86 |
+
color: var(--primary-color);
|
87 |
+
margin-right: 10px;
|
88 |
+
}
|
89 |
+
|
90 |
+
h1 {
|
91 |
+
color: #fff;
|
92 |
+
font-size: 2.5em;
|
93 |
+
margin: 0;
|
94 |
+
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
95 |
+
}
|
96 |
+
|
97 |
+
.container {
|
98 |
+
max-width: 800px;
|
99 |
+
margin: 40px auto;
|
100 |
+
padding: 30px;
|
101 |
+
background-color: var(--background-color);
|
102 |
+
border-radius: 8px;
|
103 |
+
box-shadow: var(--shadow);
|
104 |
+
position: relative;
|
105 |
+
z-index: 1;
|
106 |
+
}
|
107 |
+
|
108 |
+
form {
|
109 |
+
display: grid;
|
110 |
+
gap: 20px;
|
111 |
+
}
|
112 |
+
|
113 |
+
label {
|
114 |
+
font-weight: 500;
|
115 |
+
margin-bottom: 5px;
|
116 |
+
color: var(--secondary-color);
|
117 |
+
}
|
118 |
+
|
119 |
+
select, input[type="text"], textarea {
|
120 |
+
width: 100%;
|
121 |
+
padding: 12px;
|
122 |
+
border: 1px solid #ddd;
|
123 |
+
border-radius: 4px;
|
124 |
+
box-sizing: border-box;
|
125 |
+
font-size: 16px;
|
126 |
+
transition: border-color 0.3s, box-shadow 0.3s;
|
127 |
+
}
|
128 |
+
|
129 |
+
select:focus, input[type="text"]:focus, textarea:focus {
|
130 |
+
outline: none;
|
131 |
+
border-color: var(--primary-color);
|
132 |
+
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
133 |
+
}
|
134 |
+
|
135 |
+
input[type="submit"] {
|
136 |
+
background-color: var(--primary-color);
|
137 |
+
color: #fff;
|
138 |
+
padding: 12px 20px;
|
139 |
+
border: none;
|
140 |
+
border-radius: 4px;
|
141 |
+
cursor: pointer;
|
142 |
+
font-size: 18px;
|
143 |
+
font-weight: 500;
|
144 |
+
transition: background-color 0.3s, transform 0.1s;
|
145 |
+
}
|
146 |
+
|
147 |
+
input[type="submit"]:hover {
|
148 |
+
background-color: #2980b9;
|
149 |
+
transform: translateY(-2px);
|
150 |
+
}
|
151 |
+
|
152 |
+
.input-section {
|
153 |
+
display: none;
|
154 |
+
background-color: rgba(249, 249, 249, 0.8);
|
155 |
+
padding: 20px;
|
156 |
+
border-radius: 4px;
|
157 |
+
border: 1px solid #e0e0e0;
|
158 |
+
}
|
159 |
+
|
160 |
+
#max-marks-section {
|
161 |
+
margin-top: 20px;
|
162 |
+
}
|
163 |
+
|
164 |
+
.icon-input {
|
165 |
+
display: flex;
|
166 |
+
align-items: center;
|
167 |
+
position: relative;
|
168 |
+
}
|
169 |
+
|
170 |
+
.icon-input i {
|
171 |
+
margin-right: 10px;
|
172 |
+
color: var(--secondary-color);
|
173 |
+
}
|
174 |
+
|
175 |
+
.icon-input input, .icon-input select, .icon-input textarea {
|
176 |
+
flex: 1;
|
177 |
+
}
|
178 |
+
|
179 |
+
.input-section .icon-input {
|
180 |
+
margin-bottom: 20px;
|
181 |
+
}
|
182 |
+
|
183 |
+
.input-section label {
|
184 |
+
display: block;
|
185 |
+
margin-bottom: 5px;
|
186 |
+
font-weight: bold;
|
187 |
+
}
|
188 |
+
|
189 |
+
.input-section input[type="file"] {
|
190 |
+
height: 40px;
|
191 |
+
}
|
192 |
+
|
193 |
+
input[type="file"] {
|
194 |
+
border: 1px solid #ddd;
|
195 |
+
border-radius: 4px;
|
196 |
+
padding: 8px 12px;
|
197 |
+
font-size: 14px;
|
198 |
+
width: 100%;
|
199 |
+
box-sizing: border-box;
|
200 |
+
}
|
201 |
+
|
202 |
+
input[type="file"]::-webkit-file-upload-button {
|
203 |
+
visibility: hidden;
|
204 |
+
width: 0;
|
205 |
+
}
|
206 |
+
|
207 |
+
input[type="file"]::before {
|
208 |
+
content: 'Choose file';
|
209 |
+
display: inline-block;
|
210 |
+
background: var(--primary-color);
|
211 |
+
color: #fff;
|
212 |
+
border-radius: 3px;
|
213 |
+
padding: 5px 8px;
|
214 |
+
outline: none;
|
215 |
+
white-space: nowrap;
|
216 |
+
cursor: pointer;
|
217 |
+
font-weight: 700;
|
218 |
+
font-size: 10pt;
|
219 |
+
}
|
220 |
+
|
221 |
+
input[type="file"]:hover::before {
|
222 |
+
background-color: #2980b9;
|
223 |
+
}
|
224 |
+
|
225 |
+
@media (max-width: 600px) {
|
226 |
+
.container {
|
227 |
+
padding: 20px;
|
228 |
+
}
|
229 |
+
}
|
230 |
+
</style>
|
231 |
+
</head>
|
232 |
+
<body>
|
233 |
+
<!-- Background Video -->
|
234 |
+
<video class="background-video" autoplay loop muted playsinline>
|
235 |
+
<source src="../static/Eval.mp4" type="video/mp4">
|
236 |
+
<source src="../static/Eval.webm" type="video/webm">
|
237 |
+
Your browser does not support the video tag.
|
238 |
+
</video>
|
239 |
+
|
240 |
+
<header class="header">
|
241 |
+
<div class="logo">
|
242 |
+
<i class="fas fa-graduation-cap"></i>
|
243 |
+
<h1>AI Grading System</h1>
|
244 |
+
</div>
|
245 |
+
</header>
|
246 |
+
<a href="teacher" class="back-button" title="Back to Home">
|
247 |
+
<i class="fas fa-arrow-left"></i>
|
248 |
+
</a>
|
249 |
+
|
250 |
+
<div class="container">
|
251 |
+
<form action="/eval" method="post" enctype="multipart/form-data">
|
252 |
+
<div class="icon-input">
|
253 |
+
<i class="fas fa-clipboard-list"></i>
|
254 |
+
<select name="input_type" id="input_type" onchange="showInputForm()">
|
255 |
+
<option value="">-- Select an option --</option>
|
256 |
+
<option value="file">File Upload</option>
|
257 |
+
<option value="text">Text Input</option>
|
258 |
+
</select>
|
259 |
+
</div>
|
260 |
+
|
261 |
+
<div id="file-input" class="input-section">
|
262 |
+
<div class="icon-input">
|
263 |
+
<i class="fas fa-file-alt"></i>
|
264 |
+
<label for="question_file">Question Paper:</label>
|
265 |
+
<input type="file" name="question_file" id="question_file" accept=".pdf,.jpeg,.jpg,.png">
|
266 |
+
</div>
|
267 |
+
|
268 |
+
<div class="icon-input">
|
269 |
+
<i class="fas fa-file-signature"></i>
|
270 |
+
<label for="answer_file">Answer Paper:</label>
|
271 |
+
<input type="file" name="answer_file" id="answer_file" accept=".pdf,.jpeg,.jpg,.png">
|
272 |
+
</div>
|
273 |
+
</div>
|
274 |
+
|
275 |
+
<div id="text-input" class="input-section">
|
276 |
+
<div class="icon-input">
|
277 |
+
<i class="fas fa-question"></i>
|
278 |
+
<textarea name="question_text" id="question_text" rows="6" placeholder="Enter your questions here..."></textarea>
|
279 |
+
</div>
|
280 |
+
|
281 |
+
<div class="icon-input">
|
282 |
+
<i class="fas fa-pencil-alt"></i>
|
283 |
+
<textarea name="answer_text" id="answer_text" rows="6" placeholder="Enter your answers here..."></textarea>
|
284 |
+
</div>
|
285 |
+
</div>
|
286 |
+
|
287 |
+
<div id="max-marks-section" class="icon-input">
|
288 |
+
<i class="fas fa-star"></i>
|
289 |
+
<input type="text" name="max_marks" id="max_marks" placeholder="Enter maximum marks" required>
|
290 |
+
</div>
|
291 |
+
|
292 |
+
<input type="submit" value="Submit and Evaluate">
|
293 |
+
</form>
|
294 |
+
</div>
|
295 |
+
|
296 |
+
<script>
|
297 |
+
function showInputForm() {
|
298 |
+
const inputType = document.getElementById('input_type').value;
|
299 |
+
document.getElementById('file-input').style.display = inputType === 'file' ? 'block' : 'none';
|
300 |
+
document.getElementById('text-input').style.display = inputType === 'text' ? 'block' : 'none';
|
301 |
+
}
|
302 |
+
</script>
|
303 |
+
</body>
|
304 |
+
</html>
|
templates/teacher_paper_gen.html
ADDED
@@ -0,0 +1,200 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Professional Question Paper Generator</title>
|
7 |
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
8 |
+
<style>
|
9 |
+
:root {
|
10 |
+
--primary-color: #3498db;
|
11 |
+
--secondary-color: #2c3e50;
|
12 |
+
--background-color: #f5f6fa;
|
13 |
+
--text-color: #333;
|
14 |
+
--card-background: rgba(255, 255, 255, 0.8); /* Adjusted for transparency */
|
15 |
+
}
|
16 |
+
|
17 |
+
body {
|
18 |
+
font-family: 'Roboto', sans-serif;
|
19 |
+
background-color: var(--background-color);
|
20 |
+
color: var(--text-color);
|
21 |
+
line-height: 1.6;
|
22 |
+
margin: 0;
|
23 |
+
padding: 0;
|
24 |
+
overflow: hidden; /* Prevent scrolling */
|
25 |
+
}
|
26 |
+
|
27 |
+
.background-video {
|
28 |
+
position: fixed;
|
29 |
+
right: 0;
|
30 |
+
bottom: 0;
|
31 |
+
min-width: 100%;
|
32 |
+
min-height: 100%;
|
33 |
+
z-index: -1; /* Ensure video is in the background */
|
34 |
+
object-fit: cover; /* Maintain aspect ratio and cover the entire screen */
|
35 |
+
}
|
36 |
+
|
37 |
+
.container {
|
38 |
+
max-width: 800px;
|
39 |
+
margin: 40px auto;
|
40 |
+
padding: 30px;
|
41 |
+
background: var(--card-background);
|
42 |
+
border-radius: 15px;
|
43 |
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
44 |
+
backdrop-filter: blur(10px); /* Add a blur effect to make text more readable */
|
45 |
+
}
|
46 |
+
|
47 |
+
h1 {
|
48 |
+
color: var(--primary-color);
|
49 |
+
text-align: center;
|
50 |
+
margin-bottom: 30px;
|
51 |
+
font-size: 2.5em;
|
52 |
+
}
|
53 |
+
|
54 |
+
form {
|
55 |
+
display: grid;
|
56 |
+
gap: 20px;
|
57 |
+
}
|
58 |
+
|
59 |
+
label {
|
60 |
+
font-weight: 500;
|
61 |
+
display: block;
|
62 |
+
margin-bottom: 5px;
|
63 |
+
}
|
64 |
+
|
65 |
+
input[type="number"],
|
66 |
+
input[type="text"],
|
67 |
+
input[type="file"] {
|
68 |
+
width: 100%;
|
69 |
+
padding: 10px;
|
70 |
+
border: 1px solid #ddd;
|
71 |
+
border-radius: 5px;
|
72 |
+
font-size: 16px;
|
73 |
+
}
|
74 |
+
|
75 |
+
input[type="file"] {
|
76 |
+
padding: 10px 0;
|
77 |
+
}
|
78 |
+
|
79 |
+
button {
|
80 |
+
background-color: var(--primary-color);
|
81 |
+
color: white;
|
82 |
+
border: none;
|
83 |
+
padding: 12px 20px;
|
84 |
+
font-size: 18px;
|
85 |
+
border-radius: 5px;
|
86 |
+
cursor: pointer;
|
87 |
+
transition: background-color 0.3s ease;
|
88 |
+
}
|
89 |
+
|
90 |
+
button:hover {
|
91 |
+
background-color: #2980b9;
|
92 |
+
}
|
93 |
+
|
94 |
+
.generated-paper {
|
95 |
+
margin-top: 40px;
|
96 |
+
padding: 20px;
|
97 |
+
background-color: #f9f9f9;
|
98 |
+
border-radius: 10px;
|
99 |
+
border: 1px solid #e0e0e0;
|
100 |
+
}
|
101 |
+
|
102 |
+
.generated-paper h2 {
|
103 |
+
color: var(--secondary-color);
|
104 |
+
margin-bottom: 20px;
|
105 |
+
}
|
106 |
+
|
107 |
+
@media (max-width: 600px) {
|
108 |
+
.container {
|
109 |
+
padding: 20px;
|
110 |
+
}
|
111 |
+
}
|
112 |
+
.back-button {
|
113 |
+
position: fixed;
|
114 |
+
top: 20px;
|
115 |
+
left: 20px;
|
116 |
+
background-color: #3498db;
|
117 |
+
color: white;
|
118 |
+
border: none;
|
119 |
+
border-radius: 50%;
|
120 |
+
width: 50px;
|
121 |
+
height: 50px;
|
122 |
+
font-size: 24px;
|
123 |
+
cursor: pointer;
|
124 |
+
transition: all 0.3s ease;
|
125 |
+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
126 |
+
display: flex;
|
127 |
+
justify-content: center;
|
128 |
+
align-items: center;
|
129 |
+
text-decoration: none;
|
130 |
+
}
|
131 |
+
|
132 |
+
.back-button:hover {
|
133 |
+
background-color: #2980b9;
|
134 |
+
transform: scale(1.1);
|
135 |
+
}
|
136 |
+
|
137 |
+
.back-button i {
|
138 |
+
transition: transform 0.3s ease;
|
139 |
+
}
|
140 |
+
|
141 |
+
.back-button:hover i {
|
142 |
+
transform: translateX(-5px);
|
143 |
+
}
|
144 |
+
|
145 |
+
</style>
|
146 |
+
</head>
|
147 |
+
<body>
|
148 |
+
<video class="background-video" autoplay muted loop>
|
149 |
+
<source src="../static/paper.mp4" type="video/mp4">
|
150 |
+
Your browser does not support the video tag.
|
151 |
+
</video>
|
152 |
+
<a href="teacher" class="back-button" title="Back to Home">Back
|
153 |
+
<i class="fas fa-arrow-left"></i>
|
154 |
+
</a>
|
155 |
+
|
156 |
+
<div class="container">
|
157 |
+
<h1>Question Paper Generator</h1>
|
158 |
+
<form action="/generate-paper" method="post" enctype="multipart/form-data">
|
159 |
+
<div>
|
160 |
+
<label for="no_of_questions">Number of questions:</label>
|
161 |
+
<input type="number" id="no_of_questions" name="no_of_questions" required>
|
162 |
+
</div>
|
163 |
+
|
164 |
+
<div>
|
165 |
+
<label for="total_marks">Total marks:</label>
|
166 |
+
<input type="number" id="total_marks" name="total_marks" required>
|
167 |
+
</div>
|
168 |
+
|
169 |
+
<div>
|
170 |
+
<label for="no_of_parts">Number of parts:</label>
|
171 |
+
<input type="number" id="no_of_parts" name="no_of_parts" required>
|
172 |
+
</div>
|
173 |
+
|
174 |
+
<div>
|
175 |
+
<label for="marks_per_part">Marks per part:</label>
|
176 |
+
<input type="number" id="marks_per_part" name="marks_per_part" required>
|
177 |
+
</div>
|
178 |
+
|
179 |
+
<div>
|
180 |
+
<label for="test_duration">Test duration:</label>
|
181 |
+
<input type="text" id="test_duration" name="test_duration" placeholder="e.g., 2 hours" required>
|
182 |
+
</div>
|
183 |
+
|
184 |
+
<div>
|
185 |
+
<label for="pdf_file">Curriculum PDF:</label>
|
186 |
+
<input type="file" id="pdf_file" name="pdf_file" accept="application/pdf" required>
|
187 |
+
</div>
|
188 |
+
|
189 |
+
<button type="submit">Generate Question Paper</button>
|
190 |
+
</form>
|
191 |
+
|
192 |
+
{% if questions %}
|
193 |
+
<div class="generated-paper">
|
194 |
+
<h2>Generated Question Paper</h2>
|
195 |
+
<p>{{ questions }}</p>
|
196 |
+
</div>
|
197 |
+
{% endif %}
|
198 |
+
</div>
|
199 |
+
</body>
|
200 |
+
</html>
|
templates/teacher_result.html
ADDED
@@ -0,0 +1,90 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Exam Evaluation Result</title>
|
7 |
+
<style>
|
8 |
+
body {
|
9 |
+
font-family: Arial, sans-serif;
|
10 |
+
line-height: 1.6;
|
11 |
+
color: #333;
|
12 |
+
max-width: 800px;
|
13 |
+
margin: 0 auto;
|
14 |
+
padding: 20px;
|
15 |
+
background-color: #f4f4f4;
|
16 |
+
}
|
17 |
+
h1 {
|
18 |
+
color: #2c3e50;
|
19 |
+
text-align: center;
|
20 |
+
}
|
21 |
+
.result-container {
|
22 |
+
background-color: #fff;
|
23 |
+
padding: 20px;
|
24 |
+
border-radius: 8px;
|
25 |
+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
26 |
+
margin-bottom: 20px;
|
27 |
+
}
|
28 |
+
pre {
|
29 |
+
white-space: pre-wrap;
|
30 |
+
word-wrap: break-word;
|
31 |
+
background-color: #f8f8f8;
|
32 |
+
border: 1px solid #ddd;
|
33 |
+
padding: 15px;
|
34 |
+
border-radius: 4px;
|
35 |
+
overflow-x: auto;
|
36 |
+
}
|
37 |
+
.back-link, .grade-button {
|
38 |
+
display: inline-block;
|
39 |
+
background-color: #3498db;
|
40 |
+
color: #fff;
|
41 |
+
padding: 10px 15px;
|
42 |
+
text-decoration: none;
|
43 |
+
border-radius: 4px;
|
44 |
+
transition: background-color 0.3s;
|
45 |
+
border: none;
|
46 |
+
cursor: pointer;
|
47 |
+
font-size: 16px;
|
48 |
+
}
|
49 |
+
.back-link:hover, .grade-button:hover {
|
50 |
+
background-color: #2980b9;
|
51 |
+
}
|
52 |
+
#grade-result {
|
53 |
+
margin-top: 20px;
|
54 |
+
font-weight: bold;
|
55 |
+
}
|
56 |
+
</style>
|
57 |
+
</head>
|
58 |
+
<body>
|
59 |
+
<h1>Exam Evaluation Result</h1>
|
60 |
+
<div class="result-container">
|
61 |
+
<pre>{{ result }}</pre>
|
62 |
+
</div>
|
63 |
+
<button onclick="assignGrade()" class="grade-button">Assign Grade</button>
|
64 |
+
<div id="grade-result"></div>
|
65 |
+
<a href="{{ url_for('eval') }}" class="back-link">Upload another set of files</a>
|
66 |
+
|
67 |
+
<script>
|
68 |
+
function assignGrade() {
|
69 |
+
fetch('/assign_grade', {
|
70 |
+
method: 'POST',
|
71 |
+
headers: {
|
72 |
+
'Content-Type': 'application/json',
|
73 |
+
},
|
74 |
+
body: JSON.stringify({ result: document.querySelector('pre').textContent }),
|
75 |
+
})
|
76 |
+
.then(response => response.json())
|
77 |
+
.then(data => {
|
78 |
+
document.getElementById('grade-result').innerHTML = `
|
79 |
+
Total Score: ${data.total_score}/${data.max_possible_score}<br>
|
80 |
+
Percentage: ${data.percentage.toFixed(2)}%<br>
|
81 |
+
Grade: ${data.grade}
|
82 |
+
`;
|
83 |
+
})
|
84 |
+
.catch((error) => {
|
85 |
+
console.error('Error:', error);
|
86 |
+
});
|
87 |
+
}
|
88 |
+
</script>
|
89 |
+
</body>
|
90 |
+
</html>
|