|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Teacher Portal - Smart Learn</title> |
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
|
<style> |
|
:root { |
|
--primary-color: #3498db; |
|
--secondary-color: #2c3e50; |
|
--background-color: rgba(236, 240, 241, 0.8); |
|
--text-color: #333; |
|
--card-background: #fff; |
|
} |
|
|
|
body { |
|
font-family: 'Roboto', sans-serif; |
|
margin: 0; |
|
padding: 0; |
|
background-color: var(--background-color); |
|
color: var(--text-color); |
|
line-height: 1.6; |
|
background-image: url('https://i.pinimg.com/736x/d0/b1/39/d0b1395ab921f995d3340b4a45007dd2.jpg'); |
|
background-size: cover; |
|
background-position: center; |
|
background-attachment: fixed; |
|
} |
|
|
|
.teacher-portal { |
|
max-width: 1200px; |
|
margin: 40px auto; |
|
padding: 30px; |
|
background: var(--card-background); |
|
border-radius: 15px; |
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.header { |
|
text-align: center; |
|
margin-bottom: 40px; |
|
position: relative; |
|
} |
|
|
|
.header h1 { |
|
font-size: 3em; |
|
margin-bottom: 10px; |
|
color: var(--primary-color); |
|
letter-spacing: 1px; |
|
text-transform: uppercase; |
|
} |
|
|
|
.header p { |
|
font-size: 1.2em; |
|
color: var(--secondary-color); |
|
} |
|
|
|
.dashboard { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
gap: 30px; |
|
margin-bottom: 40px; |
|
} |
|
|
|
.dashboard-card { |
|
background: var(--card-background); |
|
border-radius: 10px; |
|
padding: 20px; |
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
|
transition: transform 0.3s ease; |
|
text-align: center; |
|
} |
|
|
|
.dashboard-card:hover { |
|
transform: translateY(-5px); |
|
} |
|
|
|
.dashboard-card h3 { |
|
font-size: 1.5em; |
|
color: var(--primary-color); |
|
margin-bottom: 15px; |
|
} |
|
|
|
.dashboard-card p { |
|
font-size: 2em; |
|
font-weight: bold; |
|
color: var(--secondary-color); |
|
margin: 0; |
|
} |
|
|
|
.dashboard-card i { |
|
font-size: 3em; |
|
color: var(--primary-color); |
|
margin-bottom: 15px; |
|
} |
|
|
|
#student-list { |
|
background: var(--card-background); |
|
border-radius: 10px; |
|
padding: 20px; |
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
#student-list h3 { |
|
font-size: 1.8em; |
|
color: var(--primary-color); |
|
margin-bottom: 20px; |
|
text-align: center; |
|
} |
|
|
|
.student-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
|
gap: 20px; |
|
} |
|
|
|
.student-card { |
|
background: var(--background-color); |
|
border-radius: 8px; |
|
padding: 15px; |
|
text-align: center; |
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
} |
|
|
|
.student-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.student-card h4 { |
|
margin: 0 0 10px; |
|
color: var(--secondary-color); |
|
} |
|
|
|
.student-card p { |
|
margin: 5px 0; |
|
font-size: 0.9em; |
|
color: var(--text-color); |
|
} |
|
|
|
.button-container { |
|
text-align: center; |
|
margin-top: 30px; |
|
} |
|
|
|
button { |
|
background: var(--primary-color); |
|
color: white; |
|
border: none; |
|
padding: 12px 25px; |
|
font-size: 1em; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
transition: background 0.3s, transform 0.3s; |
|
text-transform: uppercase; |
|
letter-spacing: 1px; |
|
} |
|
|
|
button:hover { |
|
background: #2980b9; |
|
transform: translateY(-2px); |
|
} |
|
|
|
#timetable-generator { |
|
margin-top: 40px; |
|
background: var(--card-background); |
|
border-radius: 10px; |
|
padding: 20px; |
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
#timetable-generator h3 { |
|
font-size: 1.8em; |
|
color: var(--primary-color); |
|
margin-bottom: 20px; |
|
text-align: center; |
|
} |
|
|
|
#timetable-generator form { |
|
display: grid; |
|
gap: 10px; |
|
max-width: 500px; |
|
margin: 0 auto; |
|
} |
|
|
|
#timetable-generator label { |
|
font-size: 1em; |
|
font-weight: bold; |
|
} |
|
|
|
#timetable-generator input { |
|
padding: 10px; |
|
border: 1px solid #ccc; |
|
border-radius: 5px; |
|
font-size: 1em; |
|
} |
|
|
|
#timetable-generator button { |
|
background: var(--primary-color); |
|
color: white; |
|
border: none; |
|
padding: 12px; |
|
font-size: 1em; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
transition: background 0.3s, transform 0.3s; |
|
margin-top: 20px; |
|
} |
|
|
|
#timetable-generator button:hover { |
|
background: #2980b9; |
|
transform: translateY(-2px); |
|
} |
|
|
|
#timetable-result { |
|
margin-top: 20px; |
|
padding: 15px; |
|
background: #fff; |
|
border-radius: 5px; |
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); |
|
white-space: pre-wrap; |
|
} |
|
|
|
.fade-in { |
|
animation: fadeIn 0.5s ease-in; |
|
} |
|
|
|
@keyframes fadeIn { |
|
from { opacity: 0; } |
|
to { opacity: 1; } |
|
} |
|
.navbar { |
|
background-color: var(--primary-color); |
|
padding: 10px 0; |
|
position: sticky; |
|
top: 0; |
|
z-index: 1000; |
|
} |
|
|
|
.navbar ul { |
|
list-style-type: none; |
|
margin: 0; |
|
padding: 0; |
|
display: flex; |
|
justify-content: center; |
|
} |
|
|
|
.navbar li { |
|
margin: 0 15px; |
|
} |
|
|
|
.navbar a { |
|
color: white; |
|
text-decoration: none; |
|
font-size: 1.1em; |
|
transition: color 0.3s; |
|
} |
|
|
|
.navbar a:hover { |
|
color: var(--secondary-color); |
|
} |
|
.modal { |
|
display: none; |
|
position: fixed; |
|
z-index: 1; |
|
left: 0; |
|
top: 0; |
|
width: 100%; |
|
height: 100%; |
|
overflow: auto; |
|
background-color: rgba(0,0,0,0.4); |
|
} |
|
|
|
.modal-content { |
|
background-color: #fefefe; |
|
margin: 15% auto; |
|
padding: 20px; |
|
border: 1px solid #888; |
|
width: 80%; |
|
max-width: 600px; |
|
border-radius: 10px; |
|
} |
|
|
|
.close { |
|
color: #aaa; |
|
float: right; |
|
font-size: 28px; |
|
font-weight: bold; |
|
} |
|
|
|
.close:hover, |
|
.close:focus { |
|
color: black; |
|
text-decoration: none; |
|
cursor: pointer; |
|
} |
|
|
|
#generate-ai-report { |
|
background-color: var(--primary-color); |
|
color: white; |
|
border: none; |
|
padding: 10px 20px; |
|
margin-top: 20px; |
|
cursor: pointer; |
|
border-radius: 5px; |
|
} |
|
|
|
#generate-ai-report:hover { |
|
background-color: #2980b9; |
|
} |
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); |
|
|
|
:root { |
|
--primary-color: #4e54c8; |
|
--secondary-color: #8f94fb; |
|
--accent-color: #ff6b6b; |
|
--text-color: #333; |
|
--bg-color: #f9f9f9; |
|
} |
|
|
|
body { |
|
font-family: 'Poppins', sans-serif; |
|
margin: 0; |
|
padding: 0; |
|
background-color: var(--bg-color); |
|
color: var(--text-color); |
|
line-height: 1.6; |
|
} |
|
|
|
.container { |
|
max-width: 1340px; |
|
margin: 0 auto; |
|
padding: 0 20px; |
|
} |
|
|
|
header { |
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
|
padding: 15px 0; |
|
position: sticky; |
|
top: 0; |
|
z-index: 1000; |
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|
} |
|
|
|
.header-content { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
|
|
.logo { |
|
font-size: 28px; |
|
font-weight: 700; |
|
color: #fff; |
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.1); |
|
} |
|
|
|
.search-bar { |
|
flex-grow: 1; |
|
margin: 0 20px; |
|
position: relative; |
|
} |
|
|
|
.search-bar input { |
|
width: 100%; |
|
padding: 12px 20px; |
|
border: none; |
|
border-radius: 30px; |
|
font-size: 16px; |
|
background-color: rgba(255,255,255,0.2); |
|
color: #fff; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.search-bar input::placeholder { |
|
color: rgba(255,255,255,0.7); |
|
} |
|
|
|
.search-bar input:focus { |
|
background-color: rgba(255,255,255,0.3); |
|
outline: none; |
|
} |
|
|
|
.ai-tools { |
|
position: absolute; |
|
right: 10px; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
} |
|
|
|
.ai-tools i { |
|
font-size: 20px; |
|
margin-left: 15px; |
|
cursor: pointer; |
|
color: #fff; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.ai-tools i:hover { |
|
color: var(--accent-color); |
|
transform: scale(1.1); |
|
} |
|
|
|
.user-actions { |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.points-display { |
|
font-size: 18px; |
|
font-weight: bold; |
|
color: #fff; |
|
margin-right: 20px; |
|
background-color: rgba(255,255,255,0.2); |
|
padding: 5px 15px; |
|
border-radius: 20px; |
|
} |
|
|
|
.profile-icon { |
|
width: 40px; |
|
height: 40px; |
|
border-radius: 50%; |
|
background-color: var(--accent-color); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-weight: bold; |
|
color: #fff; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.profile-icon:hover { |
|
transform: scale(1.1); |
|
} |
|
|
|
.nav-bar { |
|
background-color: #fff; |
|
padding: 10px 0; |
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
|
} |
|
|
|
.nav-bar ul { |
|
list-style-type: none; |
|
margin: 0; |
|
padding: 0; |
|
display: flex; |
|
justify-content: center; |
|
} |
|
|
|
.nav-bar li { |
|
margin: 0 15px; |
|
} |
|
|
|
.nav-bar a { |
|
text-decoration: none; |
|
color: var(--text-color); |
|
font-weight: 600; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.nav-bar a:hover { |
|
color: var(--primary-color); |
|
} |
|
|
|
.hero { |
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
|
padding: 25px 0; |
|
text-align: center; |
|
color: #fff; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.hero::before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
background: url('https://source.unsplash.com/random/1600x900?education') no-repeat center center; |
|
background-size: cover; |
|
opacity: 0.1; |
|
z-index: 0; |
|
} |
|
|
|
.hero-content { |
|
position: relative; |
|
z-index: 1; |
|
} |
|
|
|
.hero h1 { |
|
font-size: 48px; |
|
margin-bottom: 20px; |
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3); |
|
} |
|
|
|
.hero p { |
|
font-size: 20px; |
|
margin-bottom: 30px; |
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.2); |
|
} |
|
|
|
.btn { |
|
display: inline-block; |
|
background-color: var(--accent-color); |
|
color: #fff; |
|
padding: 12px 30px; |
|
text-decoration: none; |
|
font-weight: 600; |
|
border-radius: 30px; |
|
transition: all 0.3s ease; |
|
box-shadow: 0 4px 15px rgba(0,0,0,0.2); |
|
} |
|
|
|
.btn:hover { |
|
background-color: #ff4757; |
|
transform: translateY(-3px); |
|
} |
|
|
|
.categories, .features, .learning-section { |
|
padding: 60px 0; |
|
background-color: #fff; |
|
margin: 40px 0; |
|
border-radius: 10px; |
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
} |
|
|
|
.section-title { |
|
font-size: 32px; |
|
text-align: center; |
|
margin-bottom: 40px; |
|
color: var(--primary-color); |
|
} |
|
|
|
.category-list, .feature-grid, .learning-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
gap: 30px; |
|
} |
|
|
|
.category-item, .feature-card, .learning-item { |
|
background-color: #fff; |
|
border-radius: 10px; |
|
padding: 20px; |
|
text-align: center; |
|
transition: all 0.3s ease; |
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
} |
|
|
|
.category-item:hover, .feature-card:hover, .learning-item:hover { |
|
transform: translateY(-10px); |
|
box-shadow: 0 15px 30px rgba(0,0,0,0.2); |
|
} |
|
|
|
.feature-grid { |
|
display: grid; |
|
grid-template-columns: repeat(3, 1fr); |
|
grid-gap: 20px; |
|
} |
|
|
|
.feature-card { |
|
background: #fff; |
|
border: 1px solid #ddd; |
|
border-radius: 8px; |
|
padding: 20px; |
|
text-align: center; |
|
} |
|
|
|
.feature-card img { |
|
max-width: 100%; |
|
border-radius: 8px; |
|
margin-bottom: 15px; |
|
} |
|
.search-bar { |
|
flex-grow: 1; |
|
margin: 0 20px; |
|
position: relative; |
|
max-width: 900px; |
|
} |
|
.profile-sidebar { |
|
display: none; |
|
position: fixed; |
|
top: 0; |
|
right: 0; |
|
width: 300px; |
|
height: 100%; |
|
background-color: #fff; |
|
box-shadow: -2px 0 5px rgba(0,0,0,0.1); |
|
padding: 20px; |
|
overflow-y: auto; |
|
} |
|
|
|
.feature-card h3 { |
|
margin: 10px 0; |
|
} |
|
|
|
.feature-card p { |
|
margin: 10px 0 20px; |
|
} |
|
|
|
.feature-card .btn { |
|
display: inline-block; |
|
padding: 10px 20px; |
|
background-color: #007BFF; |
|
color: #fff; |
|
text-decoration: none; |
|
border-radius: 4px; |
|
} |
|
#subjects-container { |
|
max-width: 600px; |
|
margin: 0 auto; |
|
padding: 30px; |
|
background: var(--card-background); |
|
border-radius: 15px; |
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
gap: 30px; |
|
} |
|
|
|
#subjects-container h3 { |
|
font-size: 1.8em; |
|
color: var(--primary-color); |
|
margin-bottom: 20px; |
|
text-align: center; |
|
} |
|
|
|
.subject-card { |
|
background: var(--card-background); |
|
border-radius: 10px; |
|
padding: 20px; |
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
|
transition: transform 0.3s ease; |
|
text-align: center; |
|
width: 100%; |
|
} |
|
|
|
.subject-card:hover { |
|
transform: translateY(-5px); |
|
} |
|
|
|
.subject-card h4 { |
|
font-size: 1.5em; |
|
color: var(--primary-color); |
|
margin-bottom: 15px; |
|
} |
|
|
|
.subject-card p { |
|
font-size: 1em; |
|
color: var(--secondary-color); |
|
margin: 0; |
|
} |
|
|
|
.spinner { |
|
text-align: center; |
|
margin-top: 20px; |
|
} |
|
.spinner-border { |
|
width: 3rem; |
|
height: 3rem; |
|
border: 5px solid #f3f3f3; |
|
border-top: 5px solid #3498db; |
|
border-radius: 50%; |
|
animation: spin 1s linear infinite; |
|
} |
|
@keyframes spin { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
|
|
.timetable-container { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: space-around; |
|
gap: 20px; |
|
margin-top: 30px; |
|
} |
|
|
|
.day-table { |
|
background-color: #fff; |
|
border-radius: 10px; |
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
padding: 15px; |
|
width: calc(33.33% - 20px); |
|
margin-bottom: 20px; |
|
} |
|
|
|
.day-table h3 { |
|
color: var(--primary-color); |
|
margin-top: 0; |
|
margin-bottom: 15px; |
|
text-align: center; |
|
} |
|
|
|
.day-table table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
} |
|
|
|
.day-table th, .day-table td { |
|
border: 1px solid #ddd; |
|
padding: 8px; |
|
text-align: left; |
|
} |
|
|
|
.day-table th { |
|
background-color: #f2f2f2; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.day-table { |
|
width: 100%; |
|
} |
|
} .timetable-container { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: space-around; |
|
gap: 20px; |
|
margin-top: 30px; |
|
} |
|
|
|
.day-table { |
|
background-color: #fff; |
|
border-radius: 10px; |
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
padding: 15px; |
|
width: calc(33.33% - 20px); |
|
margin-bottom: 20px; |
|
} |
|
html { |
|
scroll-behavior: smooth; |
|
} |
|
|
|
.day-table h3 { |
|
color: var(--primary-color); |
|
margin-top: 0; |
|
margin-bottom: 15px; |
|
text-align: center; |
|
} |
|
|
|
.day-table table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
} |
|
.loading-circle { |
|
display: none; |
|
width: 20px; |
|
height: 20px; |
|
border: 3px solid #f3f3f3; |
|
border-top: 3px solid #3498db; |
|
border-radius: 50%; |
|
animation: spin 1s linear infinite; |
|
margin-left: 10px; |
|
} |
|
|
|
@keyframes spin { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
|
|
.day-table th, .day-table td { |
|
border: 1px solid #ddd; |
|
padding: 8px; |
|
text-align: left; |
|
} |
|
|
|
.day-table th { |
|
background-color: #f2f2f2; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.day-table { |
|
width: 100%; |
|
} |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.feature-grid { |
|
grid-template-columns: 1fr; |
|
} |
|
} |
|
|
|
</style> |
|
</head> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
|
<body> |
|
<header> |
|
<div class="container"> |
|
<div class="header-content"> |
|
<div class="logo">SmartLearn</div> |
|
<div class="search-bar"> |
|
<input type="text" placeholder="Search for anything"> |
|
<div class="ai-tools"> |
|
<i class="fas fa-camera" title="Photo Question Answering"></i> |
|
<i class="fas fa-brain" title="AI Tutor"></i> |
|
<i class="fas fa-robot" title="AI Assistant"></i> |
|
</div> |
|
</div> |
|
<div class="user-actions"> |
|
|
|
<div class="profile-icon" id="profile-icon">{{ teacher.name[0] }}</div> |
|
|
|
<div id="profile-sidebar" class="profile-sidebar"> |
|
<button id="close-profile" class="close-button">×</button> |
|
|
|
<div class="profile-header"> |
|
<img src="https://via.placeholder.com/150" alt="Teacher Avatar" class="avatar"> |
|
<h2>{{ teacher.name }}</h2> |
|
<p>Teacher ID: {{ teacher.id }}</p> |
|
</div> |
|
|
|
<div class="profile-info"> |
|
<p><strong>School:</strong> {{ teacher.school }}</p> |
|
<p><strong>Date of Birth:</strong> {{ teacher.dob }}</p> |
|
<p><strong>Email:</strong> {{ teacher.email }}</p> |
|
</div> |
|
|
|
<div class="subjects"> |
|
<h3>Subjects Taught</h3> |
|
<ul> |
|
{% for subject in teacher.subjects_taught %} |
|
<li>{{ subject }}</li> |
|
{% endfor %} |
|
</ul> |
|
|
|
<h3>Classes</h3> |
|
<ul> |
|
{% for class in teacher.classes %} |
|
<li>{{ class }}</li> |
|
{% endfor %} |
|
</ul> |
|
</div> |
|
|
|
<div class="performance-graph"> |
|
<h3>Weekly Class Performance</h3> |
|
<canvas id="performanceChart"></canvas> |
|
</div> |
|
|
|
<div class="additional-info"> |
|
<h3>Qualifications</h3> |
|
<ul> |
|
{% for qualification in teacher.qualifications %} |
|
<li>{{ qualification }}</li> |
|
{% endfor %} |
|
</ul> |
|
|
|
<h3>Years of Experience</h3> |
|
<p>{{ teacher.years_of_experience }}</p> |
|
</div> |
|
|
|
<a href="{{ url_for('index') }}" style="color: #ff4757; text-align: center;"><h2>Log out</h2></a> |
|
</div> |
|
|
|
</header> |
|
|
|
<nav class="nav-bar"> |
|
<ul> |
|
<li><a href="{{ url_for('teacher') }}"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li> |
|
<li><a href="{{ url_for('generate_paper') }}"><i class="fas fa-file-alt"></i> Generate Paper</a></li> |
|
<li><a href="{{ url_for('eval') }}"><i class="fas fa-check-circle"></i> Evaluate</a></li> |
|
<li><a href="#student-list"><i class="fas fa-chart-bar"></i> Generate Report</a></li> |
|
<li><a href="#timetable-generator"><i class="fas fa-calendar-alt"></i> Generate Timetable</a></li> |
|
<li><a href="{{ url_for('ai_timetable') }}"><i class="fas fa-calendar-alt"></i>Slow Learner</a></li> |
|
</ul> |
|
</nav> |
|
|
|
|
|
<div class="teacher-portal fade-in"> |
|
<div class="header"> |
|
<h1>Teacher Portal</h1> |
|
<p>Welcome, <span id="teacher-name-display"></span>!</p> |
|
</div> |
|
<div class="dashboard"> |
|
<div class="dashboard-card"> |
|
<i class="fas fa-user-graduate"></i> |
|
<h3>Total Students</h3> |
|
<p id="total-students"></p> |
|
</div> |
|
<div class="dashboard-card"> |
|
<i class="fas fa-chart-line"></i> |
|
<h3>Average CGPA</h3> |
|
<p id="average-cgpa"></p> |
|
</div> |
|
<div class="dashboard-card"> |
|
<i class="fas fa-clipboard-check"></i> |
|
<h3>Average AI Test Score</h3> |
|
<p id="average-ai-score"></p> |
|
</div> |
|
</div> |
|
<div id="student-list"> |
|
<h3>Student List</h3> |
|
<div class="student-grid" id="student-grid"></div> |
|
</div> |
|
<div id="student-details" class="modal"> |
|
<div class="modal-content"> |
|
<span class="close">×</span> |
|
<div id="student-expanded-info"></div> |
|
<button id="generate-ai-report">Generate AI Report</button> |
|
</div> |
|
</div> |
|
<div class="button-container"> |
|
<button onclick="window.location.href='index.html'">Back to Home</button> |
|
</div> |
|
<div id="timetable-generator"> |
|
<h3>Generate Timetable</h3> |
|
<form id="timetable-form"> |
|
<label for="hours-per-day">Hours per Day:</label> |
|
<input type="number" id="hours-per-day" name="hours_per_day" required> |
|
|
|
<label for="days-per-week">Days per Week:</label> |
|
<input type="number" id="days-per-week" name="days_per_week" required> |
|
|
|
<label for="semester-end-date">Semester End Date:</label> |
|
<input type="date" id="semester-end-date" name="semester_end_date" required> |
|
|
|
<label for="number-of-subjects">Number of Subjects:</label> |
|
<input type="number" id="number-of-subjects" name="number_of_subjects" required> |
|
|
|
<div id="subjects-container"> |
|
|
|
</div> |
|
<button type="submit">Generate Timetable</button> |
|
<div id="timetable-spinner" class="spinner"></div> |
|
</form> |
|
<div id="timetable-result"></div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
const teacherName = localStorage.getItem('teacherName'); |
|
document.getElementById('teacher-name-display').textContent = teacherName || 'Teacher'; |
|
|
|
const studentGrid = document.getElementById('student-grid'); |
|
const studentDetails = document.getElementById('student-details'); |
|
const studentExpandedInfo = document.getElementById('student-expanded-info'); |
|
const closeBtn = document.querySelector('.close'); |
|
const generateAIReportBtn = document.getElementById('generate-ai-report'); |
|
|
|
fetch('/get_students') |
|
.then(response => response.json()) |
|
.then(students => { |
|
let totalCGPA = 0; |
|
let totalAIScore = 0; |
|
|
|
students.forEach(student => { |
|
const studentCard = document.createElement('div'); |
|
studentCard.className = 'student-card'; |
|
studentCard.innerHTML = ` |
|
<h4>${student.name}</h4> |
|
<p>Age: ${student.age}</p> |
|
<p>CGPA: ${student.cgpa}</p> |
|
<p>Course: ${student.course_pursuing}</p> |
|
<p>Assigned Test Score: ${student.assigned_test_score}</p> |
|
`; |
|
studentCard.addEventListener('click', () => showStudentDetails(student)); |
|
studentGrid.appendChild(studentCard); |
|
|
|
totalCGPA += student.cgpa; |
|
totalAIScore += student.ai_test_score; |
|
}); |
|
|
|
const totalStudents = students.length; |
|
const averageCGPA = totalStudents > 0 ? totalCGPA / totalStudents : 0; |
|
const averageAIScore = totalStudents > 0 ? totalAIScore / totalStudents : 0; |
|
|
|
document.getElementById('total-students').textContent = totalStudents; |
|
document.getElementById('average-cgpa').textContent = averageCGPA.toFixed(2); |
|
document.getElementById('average-ai-score').textContent = averageAIScore.toFixed(2); |
|
}) |
|
.catch(error => { |
|
console.error('Error fetching student data:', error); |
|
}); |
|
|
|
function showStudentDetails(student) { |
|
studentExpandedInfo.innerHTML = ` |
|
<h2>${student.name}</h2> |
|
<p>Age: ${student.age}</p> |
|
<p>CGPA: ${student.cgpa}</p> |
|
<p>Course: ${student.course_pursuing}</p> |
|
<p>Assigned Test Score: ${student.assigned_test_score}</p> |
|
<p>AI Test Score: ${student.ai_test_score}</p> |
|
<p>Interests: ${student.interests}</p> |
|
<p>Difficulty in: ${student.difficulty_in}</p> |
|
<p>Courses Taken: ${student.courses_taken}</p> |
|
`; |
|
studentExpandedInfo.dataset.studentData = JSON.stringify(student); |
|
studentDetails.style.display = 'block'; |
|
} |
|
|
|
closeBtn.onclick = function() { |
|
studentDetails.style.display = 'none'; |
|
} |
|
|
|
generateAIReportBtn.onclick = function() { |
|
const studentData = JSON.parse(studentExpandedInfo.dataset.studentData); |
|
|
|
const loadingCircle = document.createElement('div'); |
|
loadingCircle.className = 'loading-circle'; |
|
this.appendChild(loadingCircle); |
|
|
|
loadingCircle.style.display = 'inline-block'; |
|
this.disabled = true; |
|
|
|
fetch('/generate_report', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json', |
|
}, |
|
body: JSON.stringify(studentData), |
|
}) |
|
.then(response => response.json()) |
|
.then(data => { |
|
const reportDiv = document.createElement('div'); |
|
reportDiv.innerHTML = `<h3>AI Generated Report</h3><p>${data.report}</p>`; |
|
studentExpandedInfo.appendChild(reportDiv); |
|
}) |
|
.catch((error) => { |
|
console.error('Error:', error); |
|
alert('Error generating AI report'); |
|
}) |
|
.finally(() => { |
|
loadingCircle.style.display = 'none'; |
|
this.disabled = false; |
|
this.removeChild(loadingCircle); |
|
}); |
|
}; |
|
|
|
window.onclick = function(event) { |
|
if (event.target == studentDetails) { |
|
studentDetails.style.display = 'none'; |
|
} |
|
} |
|
const numberOfSubjectsInput = document.getElementById('number-of-subjects'); |
|
numberOfSubjectsInput.addEventListener('change', function() { |
|
const subjectsContainer = document.getElementById('subjects-container'); |
|
subjectsContainer.innerHTML = ''; |
|
|
|
const numberOfSubjects = parseInt(this.value); |
|
for (let i = 0; i < numberOfSubjects; i++) { |
|
const subjectLabel = document.createElement('label'); |
|
subjectLabel.textContent = `Subject ${i + 1}:`; |
|
|
|
const subjectInput = document.createElement('input'); |
|
subjectInput.type = 'text'; |
|
subjectInput.name = `subject_${i + 1}`; |
|
subjectInput.required = true; |
|
|
|
subjectsContainer.appendChild(subjectLabel); |
|
subjectsContainer.appendChild(subjectInput); |
|
} |
|
}); |
|
|
|
|
|
const timetableForm = document.getElementById('timetable-form'); |
|
const timetableResult = document.getElementById('timetable-result'); |
|
|
|
timetableForm.addEventListener('submit', function(e) { |
|
e.preventDefault(); |
|
|
|
const formData = new FormData(timetableForm); |
|
const subjects = []; |
|
for (let [key, value] of formData.entries()) { |
|
if (key.startsWith('subject_')) { |
|
subjects.push(value); |
|
} |
|
} |
|
|
|
const timetableData = { |
|
hours_per_day: formData.get('hours_per_day'), |
|
days_per_week: formData.get('days_per_week'), |
|
semester_end_date: formData.get('semester_end_date'), |
|
subjects: subjects |
|
}; |
|
|
|
const spinner = document.getElementById('timetable-spinner'); |
|
const submitButton = timetableForm.querySelector('button[type="submit"]'); |
|
|
|
|
|
spinner.style.display = 'block'; |
|
submitButton.disabled = true; |
|
submitButton.style.opacity = '0.5'; |
|
|
|
fetch('/generate_timetable', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json' |
|
}, |
|
body: JSON.stringify(timetableData) |
|
}) |
|
.then(response => { |
|
if (!response.ok) { |
|
throw new Error('Failed to generate timetable'); |
|
} |
|
return response.json(); |
|
}) |
|
.then(data => { |
|
if (data.error) { |
|
timetableResult.textContent = 'Error: ' + data.error; |
|
} else { |
|
timetableResult.textContent = data.timetable; |
|
} |
|
}) |
|
.catch(error => { |
|
timetableResult.textContent = 'Error: ' + error.message; |
|
}) |
|
.finally(() => { |
|
|
|
spinner.style.display = 'none'; |
|
submitButton.disabled = false; |
|
submitButton.style.opacity = '1'; |
|
}); |
|
}); |
|
}); |
|
</script> |
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
<script src="static/profile.js"></script> |
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
const profileIcon = document.getElementById('profile-icon'); |
|
const profileSidebar = document.getElementById('profile-sidebar'); |
|
const closeProfile = document.getElementById('close-profile'); |
|
|
|
profileIcon.addEventListener('click', function() { |
|
profileSidebar.style.display = 'block'; |
|
}); |
|
|
|
closeProfile.addEventListener('click', function() { |
|
profileSidebar.style.display = 'none'; |
|
}); |
|
}); |
|
</script> |
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
const profileIcon = document.getElementById('profile-icon'); |
|
const profileSidebar = document.getElementById('profile-sidebar'); |
|
const closeProfile = document.getElementById('close-profile'); |
|
|
|
profileIcon.addEventListener('click', function() { |
|
profileSidebar.classList.add('active'); |
|
renderPerformanceChart(); |
|
}); |
|
|
|
closeProfile.addEventListener('click', function() { |
|
profileSidebar.classList.remove('active'); |
|
}); |
|
|
|
function renderPerformanceChart() { |
|
const ctx = document.getElementById('performanceChart').getContext('2d'); |
|
|
|
|
|
const data = { |
|
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'], |
|
datasets: [{ |
|
label: 'Performance Score', |
|
data: [65, 72, 68, 80, 75, 85], |
|
fill: false, |
|
borderColor: 'rgb(75, 192, 192)', |
|
tension: 0.1, |
|
pointBackgroundColor: 'rgb(75, 192, 192)', |
|
pointBorderColor: '#fff', |
|
pointHoverBackgroundColor: '#fff', |
|
pointHoverBorderColor: 'rgb(75, 192, 192)' |
|
}] |
|
}; |
|
|
|
const config = { |
|
type: 'line', |
|
data: data, |
|
options: { |
|
responsive: true, |
|
plugins: { |
|
title: { |
|
display: true, |
|
text: 'Weekly Performance' |
|
}, |
|
legend: { |
|
position: 'bottom', |
|
} |
|
}, |
|
scales: { |
|
y: { |
|
beginAtZero: true, |
|
max: 100, |
|
title: { |
|
display: true, |
|
text: 'Score' |
|
} |
|
}, |
|
x: { |
|
title: { |
|
display: true, |
|
text: 'Week' |
|
} |
|
} |
|
} |
|
} |
|
}; |
|
|
|
new Chart(ctx, config); |
|
} |
|
}); |
|
|
|
</script> |
|
|
|
|
|
<script> |
|
|
|
const weeklyPerformanceData = JSON.parse('{{ teacher.weekly_class_performance|tojson|safe }}'); |
|
|
|
|
|
const ctx = document.getElementById('performanceChart').getContext('2d'); |
|
const labels = Object.keys(weeklyPerformanceData); |
|
const datasets = labels.map(label => ({ |
|
label: label, |
|
data: weeklyPerformanceData[label], |
|
borderColor: getRandomColor(), |
|
fill: false |
|
})); |
|
|
|
const performanceChart = new Chart(ctx, { |
|
type: 'line', |
|
data: { |
|
labels: Array.from({length: 7}, (_, i) => `Week ${i + 1}`), |
|
datasets: datasets |
|
}, |
|
options: { |
|
responsive: true, |
|
scales: { |
|
x: { |
|
title: { |
|
display: true, |
|
text: 'Weeks' |
|
} |
|
}, |
|
y: { |
|
title: { |
|
display: true, |
|
text: 'Performance Score' |
|
}, |
|
beginAtZero: true |
|
} |
|
} |
|
} |
|
}); |
|
|
|
function getRandomColor() { |
|
const letters = '0123456789ABCDEF'; |
|
let color = '#'; |
|
for (let i = 0; i < 6; i++) { |
|
color += letters[Math.floor(Math.random() * 16)]; |
|
} |
|
return color; |
|
} |
|
</script> |
|
|
|
</body> |
|
</html> |
|
|
|
|
|
</body> |
|
</html> |
