Neurolingua commited on
Commit
343bf49
·
verified ·
1 Parent(s): c17a638

Upload 18 files

Browse files
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()">&times;</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">&times;</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>&copy; 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,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" }
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">&times;</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">&times;</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>