Hugging Face's logo

Spaces:
bunnybala
/
present
Running

App Files Community
bunnybala commited on
Commit
1c18c21
·
verified ·
1 Parent(s): c71dee2

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +695 -18
index.html CHANGED
@@ -1,19 +1,696 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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>PMC Tech - Complete AI Attendance</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
9
+ <style>
10
+ body { font-family: 'Inter', sans-serif; background-color: #F3F4F6; }
11
+ .view { display: none; }
12
+ .view.active { display: block; }
13
+ .header-wave {
14
+ background: linear-gradient(to right, #8A2BE2, #6A0DAD);
15
+ border-bottom-left-radius: 50% 20%;
16
+ border-bottom-right-radius: 50% 20%;
17
+ }
18
+ .nav-btn.active { color: #8A2BE2; background-color: #f3e8ff; }
19
+ .timetable-select {
20
+ -webkit-appearance: none; -moz-appearance: none; appearance: none;
21
+ background-image: none; border: 1px solid #e5e7eb;
22
+ }
23
+ .loader {
24
+ border: 4px solid #f3f3f3; border-top: 4px solid #8A2BE2;
25
+ border-radius: 50%; width: 24px; height: 24px;
26
+ animation: spin 1s linear infinite;
27
+ }
28
+ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
29
+ </style>
30
+ </head>
31
+ <body class="antialiased">
32
+
33
+ <div id="app-container" class="container mx-auto max-w-md min-h-screen bg-white flex flex-col shadow-2xl">
34
+
35
+ <header id="app-header" class="header-wave text-white p-6 pt-10 h-40 hidden">
36
+ <h1 id="header-title" class="text-2xl font-bold text-center"></h1>
37
+ <p id="header-subtitle" class="text-center text-sm opacity-90"></p>
38
+ </header>
39
+
40
+ <div id="message-box" class="hidden fixed top-5 left-1/2 -translate-x-1/2 z-50 p-4 text-white rounded-lg shadow-lg"></div>
41
+
42
+ <main id="main-content" class="flex-grow p-4 overflow-y-auto"></main>
43
+
44
+ <nav id="bottom-nav" class="bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.1)] p-2 hidden">
45
+ <div class="flex justify-around">
46
+ <button data-view="department" class="nav-btn flex flex-col items-center text-gray-500 p-2 rounded-lg w-20">
47
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
48
+ <span class="text-xs">Home</span>
49
+ </button>
50
+ <button data-view="studentManagement" class="nav-btn flex flex-col items-center text-gray-500 p-2 rounded-lg w-20">
51
+ <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" /></svg>
52
+ <span class="text-xs">Students</span>
53
+ </button>
54
+ <button data-view="reports" class="nav-btn flex flex-col items-center text-gray-500 p-2 rounded-lg w-20">
55
+ <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" /></svg>
56
+ <span class="text-xs">Reports</span>
57
+ </button>
58
+ <button data-view="manage" class="nav-btn flex flex-col items-center text-gray-500 p-2 rounded-lg w-20">
59
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.096 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
60
+ <span class="text-xs">Manage</span>
61
+ </button>
62
+ </div>
63
+ </nav>
64
+
65
+ <div id="gemini-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center p-4 z-50">
66
+ <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
67
+ <h3 class="text-lg font-bold mb-2">✨ AI Attendance Analysis</h3>
68
+ <div id="gemini-modal-content" class="text-gray-700 max-h-64 overflow-y-auto"></div>
69
+ <button data-action="closeModal" class="mt-4 w-full bg-gray-200 py-2 rounded-lg">Close</button>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <script>
75
+ document.addEventListener('DOMContentLoaded', () => {
76
+ // --- Application State ---
77
+ const state = {
78
+ db: null,
79
+ currentStaff: null,
80
+ selectedDept: null,
81
+ selectedYear: null,
82
+ currentView: 'login',
83
+ };
84
+
85
+ const DEPARTMENTS = ["Aeronautical", "AI & Data Science", "Biomedical", "Biotechnology", "Civil", "Computer Science", "Electrical", "Electronics & Comm.", "Information Technology", "Mechanical", "Mechatronics"];
86
+
87
+ // --- UI Rendering Engine ---
88
+ const ui = {
89
+ mainContent: document.getElementById('main-content'),
90
+ header: document.getElementById('app-header'),
91
+ headerTitle: document.getElementById('header-title'),
92
+ headerSubtitle: document.getElementById('header-subtitle'),
93
+ bottomNav: document.getElementById('bottom-nav'),
94
+ messageBox: document.getElementById('message-box'),
95
+ geminiModal: document.getElementById('gemini-modal'),
96
+ geminiModalContent: document.getElementById('gemini-modal-content'),
97
+
98
+ templates: {
99
+ login: () => `
100
+ <div class="view active flex flex-col h-full justify-center bg-gradient-to-b from-[#6A0DAD] to-[#8A2BE2] p-6 -m-4">
101
+ <div class="bg-white/30 backdrop-blur-sm p-8 rounded-2xl shadow-lg text-center">
102
+ <input id="login-username" type="text" placeholder="Staff Username" class="w-full p-3 mb-4 bg-white/50 rounded-lg placeholder-gray-600">
103
+ <input id="login-password" type="password" placeholder="Password" class="w-full p-3 mb-6 bg-white/50 rounded-lg placeholder-gray-600">
104
+ <button data-action="login" class="w-full bg-white text-[#6A0DAD] font-bold py-3 rounded-lg shadow-md mb-4">Login</button>
105
+ <button data-view="register" class="w-full bg-[#8A2BE2] text-white font-bold py-3 rounded-lg shadow-md">Register New Staff</button>
106
+ </div>
107
+ <div class="text-center mt-10">
108
+ <img src="/home/tharun/projects/present/images.png" alt="" class="w-32 mx-auto">
109
+ <p class="text-center text-white text-sm mt-6">First time? <a href="#" data-view="dbManager" class="font-bold hover:underline">Setup/Load Database</a></p>
110
+ </div>
111
+ </div>`,
112
+ register: () => `
113
+ <div class="view active flex flex-col h-full justify-center bg-gradient-to-b from-[#6A0DAD] to-[#8A2BE2] p-6 -m-4">
114
+ <div class="bg-white/30 backdrop-blur-sm p-8 rounded-2xl shadow-lg text-center">
115
+ <h2 class="text-white text-2xl font-bold mb-6">Staff Registration</h2>
116
+ <input id="register-username" type="text" placeholder="Username" class="w-full p-3 mb-4 bg-white/50 rounded-lg placeholder-gray-600">
117
+ <input id="register-email" type="email" placeholder="Email Address" class="w-full p-3 mb-4 bg-white/50 rounded-lg placeholder-gray-600">
118
+ <select id="register-department" class="w-full p-3 mb-4 bg-white/50 rounded-lg text-gray-700"></select>
119
+ <select id="register-position" class="w-full p-3 mb-4 bg-white/50 rounded-lg text-gray-700">
120
+ <option value="">Select Position</option><option value="HOD">HOD</option><option value="Class Advisor">Class Advisor</option><option value="Professor">Professor</option>
121
+ </select>
122
+ <input id="register-password" type="password" placeholder="Password" class="w-full p-3 mb-4 bg-white/50 rounded-lg placeholder-gray-600">
123
+ <button data-action="register" class="w-full bg-white text-[#6A0DAD] font-bold py-3 rounded-lg shadow-md mb-4">Register</button>
124
+ <a href="#" data-view="login" class="text-white hover:underline">Back to Login</a>
125
+ </div>
126
+ </div>`,
127
+ department: () => {
128
+ const deptsToShow = state.currentStaff.position === 'HOD' ? [state.currentStaff.department] : DEPARTMENTS;
129
+ return `
130
+ <div class="view active">
131
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Select Department</h2>
132
+ <div class="space-y-3">
133
+ ${deptsToShow.map(dept => `<button data-action="selectDept" data-dept="${dept}" class="w-full flex items-center p-4 bg-white rounded-lg shadow-md hover:bg-gray-50"><span class="font-semibold text-gray-700">${dept}</span></button>`).join('')}
134
+ </div>
135
+ </div>`;
136
+ },
137
+ year: () => `
138
+ <div class="view active">
139
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Select Year</h2>
140
+ <div class="grid grid-cols-2 gap-4">
141
+ ${[1, 2, 3, 4].map(year => `<button data-action="selectYear" data-year="${year}" class="flex flex-col items-center justify-center p-6 bg-purple-600 text-white rounded-2xl shadow-lg h-32 hover:bg-purple-700"><span class="text-4xl font-extrabold">${year}</span><span class="font-semibold">${year}${util.getYearSuffix(year)} Year</span></button>`).join('')}
142
+ </div>
143
+ </div>`,
144
+ studentManagement: () => `
145
+ <div class="view active">
146
+ <div class="bg-gray-100 p-4 rounded-lg mb-6">
147
+ <h3 class="font-bold text-lg mb-2">Add New Student</h3>
148
+ <input type="text" id="student-name-input" placeholder="Student Full Name" class="w-full p-2 mb-2 border rounded">
149
+ <input type="text" id="student-regno-input" placeholder="Register Number" class="w-full p-2 mb-2 border rounded">
150
+ <button data-action="addStudent" class="w-full bg-purple-600 text-white font-bold py-2 rounded-lg">Add Student</button>
151
+ </div>
152
+ <div>
153
+ <h3 class="font-bold text-lg mb-2">Student List</h3>
154
+ <div id="student-list-container" class="space-y-2">${logic.getStudentListHTML()}</div>
155
+ </div>
156
+ </div>`,
157
+ attendanceEntry: () => {
158
+ const { subjectName } = logic.getScheduledSubject();
159
+ const subjectDisplay = subjectName !== 'General'
160
+ ? `<div class="bg-purple-100 text-purple-800 p-3 rounded-lg text-center mb-4"><p class="font-bold">${subjectName}</p><p class="text-sm">Scheduled for this hour</p></div>`
161
+ : `<div class="bg-yellow-100 text-yellow-800 p-3 rounded-lg text-center mb-4"><p class="font-bold">No Subject Scheduled</p><p class="text-sm">Attendance will be marked as 'General'</p></div>`;
162
+
163
+ return `
164
+ <div class="view active">
165
+ ${subjectDisplay}
166
+ <div class="bg-gray-100 p-4 rounded-lg mb-4">
167
+ <div class="grid grid-cols-2 gap-4">
168
+ <div><label for="attendance-date" class="text-sm font-medium">Date</label><input type="date" id="attendance-date" class="w-full p-2 border rounded mt-1" value="${new Date().toISOString().split('T')[0]}"></div>
169
+ <div><label for="attendance-hour" class="text-sm font-medium">Hour (1-8)</label><select id="attendance-hour" class="w-full p-2 border rounded mt-1">${[...Array(8).keys()].map(i => `<option value="${i+1}">Hour ${i+1}</option>`).join('')}</select></div>
170
+ </div>
171
+ </div>
172
+ <h3 class="font-bold text-lg mb-2">Mark Absentees</h3>
173
+ <div id="attendance-student-list" class="space-y-2">${logic.getStudentCheckboxListHTML()}</div>
174
+ <button data-action="submitAttendance" class="w-full mt-4 bg-[#8A2BE2] text-white font-bold py-3 rounded-lg shadow-md">Submit Attendance</button>
175
+ </div>`;
176
+ },
177
+ reports: () => `
178
+ <div class="view active">
179
+ <div class="bg-gray-100 p-4 rounded-lg mb-4">
180
+ <h3 class="font-bold mb-2">Generate Student-wise Report</h3>
181
+ <div class="flex space-x-2" id="period-selector">
182
+ <button data-period="week" class="period-btn flex-1 bg-purple-800 text-white py-2 rounded-lg">This Week</button>
183
+ <button data-period="month" class="period-btn flex-1 bg-gray-200 text-gray-800 py-2 rounded-lg">This Month</button>
184
+ </div>
185
+ </div>
186
+ <div id="reports-placeholder" class="text-center text-gray-500 p-8">Select a class from Home to see reports.</div>
187
+ <div id="student-wise-report" class="hidden"></div>
188
+ <div class="bg-gray-100 p-4 rounded-lg mt-6">
189
+ <h3 class="font-bold mb-2">Download Detailed Log (CSV)</h3>
190
+ <p class="text-xs text-gray-600 mb-2">Generates a full attendance log for the selected class, including subjects.</p>
191
+ <button data-action="downloadReport" class="w-full bg-blue-600 text-white font-bold py-2 rounded-lg">Download Full Report</button>
192
+ </div>
193
+ </div>`,
194
+ manage: () => `
195
+ <div class="view active space-y-4">
196
+ <h2 class="text-xl font-bold text-gray-800">Management</h2>
197
+ <button data-view="subjects" class="w-full text-left p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 font-semibold">Manage My Subjects</button>
198
+ <button data-view="timetable" class="w-full text-left p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 font-semibold">Set Class Timetable</button>
199
+ <button data-view="profile" class="w-full text-left p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 font-semibold">My Profile</button>
200
+ <button data-view="dbManager" class="w-full text-left p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 font-semibold">Database Settings</button>
201
+ </div>`,
202
+ subjects: () => `
203
+ <div class="view active">
204
+ <div class="bg-gray-100 p-4 rounded-lg mb-6">
205
+ <h3 class="font-bold text-lg mb-2">Add New Subject</h3>
206
+ <input type="text" id="subject-name-input" placeholder="e.g., Data Structures" class="w-full p-2 mb-2 border rounded">
207
+ <button data-action="addSubject" class="w-full bg-purple-600 text-white font-bold py-2 rounded-lg">Add Subject</button>
208
+ </div>
209
+ <div>
210
+ <h3 class="font-bold text-lg mb-2">My Subjects</h3>
211
+ <div id="subject-list-container" class="space-y-2">${logic.getSubjectListHTML()}</div>
212
+ </div>
213
+ </div>`,
214
+ timetable: () => {
215
+ if (!state.selectedDept || !state.selectedYear) return `<div class="view active text-center p-8 text-gray-600">Please select a Department and Year from the Home screen first to set the timetable.</div>`;
216
+ return `
217
+ <div class="view active">
218
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Set Timetable</h2>
219
+ <div class="overflow-x-auto">
220
+ <table class="min-w-full border-collapse">
221
+ <thead><tr class="bg-gray-100"><th class="p-2 border">Day/Hour</th>${[...Array(8).keys()].map(h => `<th class="p-2 border">${h+1}</th>`).join('')}</tr></thead>
222
+ <tbody>${logic.getTimetableHTML()}</tbody>
223
+ </table>
224
+ </div>
225
+ <button data-action="saveTimetable" class="w-full mt-4 bg-green-500 text-white font-bold py-3 rounded-lg shadow-md">Save Timetable</button>
226
+ </div>`;
227
+ },
228
+ profile: () => `
229
+ <div class="view active">
230
+ <div class="bg-gray-100 p-6 rounded-2xl shadow-md flex items-center space-x-4 mb-6">
231
+ <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center text-white text-2xl font-bold">${state.currentStaff.username.charAt(0).toUpperCase()}</div>
232
+ <div>
233
+ <h3 class="text-xl font-bold text-gray-800">${state.currentStaff.username}</h3>
234
+ <p class="text-gray-600">${state.currentStaff.position}</p>
235
+ <p class="text-gray-600">${state.currentStaff.department}</p>
236
+ </div>
237
+ </div>
238
+ <button data-action="logout" class="w-full bg-red-500 text-white font-bold py-3 rounded-lg shadow-md">Logout</button>
239
+ </div>`,
240
+ dbManager: () => `
241
+ <div class="view active bg-white p-8 rounded-xl shadow-lg text-center">
242
+ <h2 class="text-2xl font-bold mb-6 text-gray-700">Database Management</h2>
243
+ <div class="space-y-4">
244
+ <button data-action="createDb" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg">Create & Save New</button>
245
+ <label for="load-db-input" class="w-full bg-green-600 text-white font-bold py-3 px-4 rounded-lg cursor-pointer block">Load from File</label>
246
+ <input type="file" id="load-db-input" class="hidden" accept=".json">
247
+ <button data-action="saveDb" id="save-db-btn" class="w-full bg-purple-600 text-white font-bold py-3 px-4 rounded-lg hidden">Save Current Changes</button>
248
+ </div>
249
+ <p class="text-center text-gray-600 text-sm mt-8">Finished? <a href="#" data-view="login" class="text-blue-600 hover:underline">Go to Login</a></p>
250
+ </div>`,
251
+ },
252
+
253
+ render() {
254
+ const view = state.currentView;
255
+ const template = this.templates[view] || (() => `<div>View not found: ${view}</div>`);
256
+ this.mainContent.innerHTML = template();
257
+
258
+ const isAuthView = ['login', 'register', 'dbManager'].includes(view);
259
+ this.header.classList.toggle('hidden', isAuthView);
260
+ this.bottomNav.classList.toggle('hidden', isAuthView);
261
+ this.mainContent.classList.toggle('pb-20', !isAuthView);
262
+
263
+ if (!isAuthView) {
264
+ this.headerTitle.textContent = util.getViewTitle(view);
265
+ this.headerSubtitle.textContent = (state.selectedDept && state.selectedYear) ? `${state.selectedDept} - ${state.selectedYear}${util.getYearSuffix(state.selectedYear)} Year` : '';
266
+ document.querySelectorAll('.nav-btn').forEach(btn => {
267
+ btn.classList.toggle('active', btn.dataset.view === view);
268
+ });
269
+ }
270
+
271
+ if (view === 'register') {
272
+ const deptDropdown = document.getElementById('register-department');
273
+ deptDropdown.innerHTML = '<option value="">Select Department</option>';
274
+ DEPARTMENTS.forEach(d => deptDropdown.add(new Option(d, d)));
275
+ }
276
+ if (view === 'reports' && state.selectedDept && state.selectedYear) {
277
+ logic.generateReport('week');
278
+ }
279
+ if (view === 'timetable') {
280
+ logic.populateTimetable();
281
+ }
282
+ if (state.db) document.getElementById('save-db-btn')?.classList.remove('hidden');
283
+ },
284
+
285
+ showMessage(msg, isError = false) {
286
+ this.messageBox.textContent = msg;
287
+ this.messageBox.className = `fixed top-5 left-1/2 -translate-x-1/2 z-50 p-4 text-white rounded-lg shadow-lg ${isError ? 'bg-red-500' : 'bg-green-500'}`;
288
+ setTimeout(() => this.messageBox.classList.add('hidden'), 3000);
289
+ },
290
+ showModal(content) {
291
+ this.geminiModalContent.innerHTML = content;
292
+ this.geminiModal.classList.add('flex');
293
+ this.geminiModal.classList.remove('hidden');
294
+ },
295
+ hideModal() {
296
+ this.geminiModal.classList.add('hidden');
297
+ this.geminiModal.classList.remove('flex');
298
+ }
299
+ };
300
+
301
+ // --- Core Logic ---
302
+ const logic = {
303
+ switchView(view) {
304
+ state.currentView = view;
305
+ ui.render();
306
+ },
307
+ getStudentListHTML() {
308
+ if (!state.selectedDept || !state.selectedYear) return '<p class="text-center text-gray-500">Please select a department and year from the Home tab first.</p>';
309
+ const studentsInClass = state.db.students.filter(s => s.department === state.selectedDept && s.year == state.selectedYear);
310
+ if (studentsInClass.length === 0) return '<p class="text-gray-500">No students added for this class.</p>';
311
+ return studentsInClass.map(s => `<div class="p-2 bg-white rounded shadow-sm flex justify-between items-center"><span>${s.name} (${s.regNo})</span></div>`).join('');
312
+ },
313
+ getStudentCheckboxListHTML() {
314
+ if (!state.selectedDept || !state.selectedYear) return '<p class="text-center text-gray-500">Please select a class from Home first.</p>';
315
+ const studentsInClass = state.db.students.filter(s => s.department === state.selectedDept && s.year == state.selectedYear);
316
+ if (studentsInClass.length === 0) return '<p class="text-center text-gray-500">No students in this class. Please add them via the "Students" tab.</p>';
317
+ return studentsInClass.map(s => `
318
+ <label class="flex items-center p-3 bg-white rounded-lg shadow-sm">
319
+ <input type="checkbox" data-regno="${s.regNo}" class="h-5 w-5 rounded text-purple-600 focus:ring-purple-500 border-gray-300">
320
+ <span class="ml-3 font-medium">${s.name}</span>
321
+ <span class="ml-auto text-sm text-gray-500">${s.regNo}</span>
322
+ </label>`).join('');
323
+ },
324
+ getSubjectListHTML: () => {
325
+ if (!state.db.subjects) return '<p>No subjects created.</p>';
326
+ const mySubjects = state.db.subjects.filter(s => s.staffId === state.currentStaff.id);
327
+ if (mySubjects.length === 0) return '<p class="text-gray-500">You have not added any subjects yet.</p>';
328
+ return mySubjects.map(s => `<div class="p-2 bg-white rounded shadow-sm">${s.name}</div>`).join('');
329
+ },
330
+ getTimetableHTML: () => {
331
+ const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
332
+ const mySubjects = state.db.subjects.filter(s => s.staffId === state.currentStaff.id);
333
+ const subjectOptions = `<option value="">-</option>` + mySubjects.map(s => `<option value="${s.id}">${s.name}</option>`).join('');
334
+
335
+ return days.map((day, dayIndex) => `
336
+ <tr>
337
+ <td class="p-2 border font-semibold bg-gray-50">${day}</td>
338
+ ${[...Array(8).keys()].map(hourIndex => {
339
+ const hour = hourIndex + 1;
340
+ return `<td class="p-1 border"><select data-day="${dayIndex}" data-hour="${hour}" class="w-full timetable-select p-1 rounded bg-transparent text-xs">${subjectOptions}</select></td>`;
341
+ }).join('')}
342
+ </tr>`).join('');
343
+ },
344
+ populateTimetable: () => {
345
+ const timetable = state.db.timetable || {};
346
+ const classTimetable = timetable[state.selectedDept]?.[state.selectedYear] || {};
347
+ document.querySelectorAll('.timetable-select').forEach(select => {
348
+ const day = select.dataset.day;
349
+ const hour = select.dataset.hour;
350
+ select.value = classTimetable[day]?.[hour] || '';
351
+ });
352
+ },
353
+ getScheduledSubject: () => {
354
+ const today = new Date();
355
+ const dayIndex = today.getDay() - 1; // Monday = 0
356
+ const hourSelect = document.getElementById('attendance-hour');
357
+ const collegeHour = hourSelect ? hourSelect.value : 0;
358
+
359
+ if (dayIndex < 0 || dayIndex > 4 || collegeHour === 0) return { subjectName: 'General', subjectId: 'general' };
360
+
361
+ const timetable = state.db.timetable || {};
362
+ const subjectId = timetable[state.selectedDept]?.[state.selectedYear]?.[dayIndex]?.[collegeHour] || 'general';
363
+
364
+ if (subjectId === 'general' || !state.db.subjects) return { subjectName: 'General', subjectId: 'general' };
365
+
366
+ const subject = state.db.subjects.find(s => s.id === subjectId);
367
+ return { subjectName: subject ? subject.name : 'General', subjectId };
368
+ },
369
+ generateReport(period) {
370
+ const placeholder = document.getElementById('reports-placeholder');
371
+ const studentWiseContainer = document.getElementById('student-wise-report');
372
+
373
+ if (!state.selectedDept || !state.selectedYear) {
374
+ placeholder.classList.remove('hidden');
375
+ studentWiseContainer.classList.add('hidden');
376
+ return;
377
+ }
378
+
379
+ placeholder.classList.add('hidden');
380
+ studentWiseContainer.classList.remove('hidden');
381
+
382
+ const { startDate, endDate } = util.getDateRange(period);
383
+ const studentsInClass = state.db.students.filter(s => s.department === state.selectedDept && s.year == state.selectedYear);
384
+
385
+ let reportHTML = `<h3 class="font-bold text-lg mb-2">Student-wise Report (${util.capitalize(period)})</h3>`;
386
+
387
+ if (studentsInClass.length === 0) {
388
+ reportHTML += '<p class="text-gray-500">No students in this class.</p>';
389
+ } else {
390
+ reportHTML += '<div class="space-y-2">';
391
+ studentsInClass.forEach(student => {
392
+ let totalHours = 0, presentHours = 0;
393
+ Object.keys(student.attendance).forEach(dateStr => {
394
+ const recordDate = new Date(dateStr);
395
+ if (recordDate >= startDate && recordDate <= endDate) {
396
+ const hours = student.attendance[dateStr];
397
+ Object.keys(hours).forEach(hour => {
398
+ totalHours++;
399
+ if (hours[hour].status === 'P') presentHours++;
400
+ });
401
+ }
402
+ });
403
+ const percentage = totalHours > 0 ? Math.round((presentHours / totalHours) * 100) : 0;
404
+ const colorClass = percentage < 75 ? 'text-red-500' : 'text-green-500';
405
+
406
+ reportHTML += `
407
+ <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
408
+ <div>
409
+ <p class="font-semibold">${student.name}</p>
410
+ <p class="text-sm text-gray-600">Present: ${presentHours}/${totalHours} hours (<span class="font-bold ${colorClass}">${percentage}%</span>)</p>
411
+ </div>
412
+ <button data-action="analyzeStudent" data-studentid="${student.id}" class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm font-semibold">✨ Analyze</button>
413
+ </div>`;
414
+ });
415
+ reportHTML += '</div>';
416
+ }
417
+ studentWiseContainer.innerHTML = reportHTML;
418
+ },
419
+ async callGeminiAPI(prompt) {
420
+ const apiKey = ""; // Canvas will provide this
421
+ const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
422
+ const payload = { contents: [{ parts: [{ text: prompt }] }] };
423
+
424
+ try {
425
+ const response = await fetch(apiUrl, {
426
+ method: 'POST',
427
+ headers: { 'Content-Type': 'application/json' },
428
+ body: JSON.stringify(payload)
429
+ });
430
+ if (!response.ok) throw new Error(`API error: ${response.statusText}`);
431
+ const result = await response.json();
432
+ return result.candidates?.[0]?.content?.parts?.[0]?.text || "No response from AI.";
433
+ } catch (error) {
434
+ console.error("Gemini API call failed:", error);
435
+ return "Failed to get analysis. Please check console for errors.";
436
+ }
437
+ }
438
+ };
439
+
440
+ // --- Event Handlers using Delegation ---
441
+ const actions = {
442
+ switchView: (el) => logic.switchView(el.dataset.view),
443
+ createDb: () => {
444
+ state.db = { staff: [], students: [], subjects: [], timetable: {} };
445
+ ui.showMessage('New database created. Please save it.');
446
+ actions.saveDb();
447
+ },
448
+ saveDb: () => {
449
+ if (!state.db) return ui.showMessage('No database to save.', true);
450
+ const dataStr = JSON.stringify(state.db, null, 2);
451
+ const blob = new Blob([dataStr], {type: 'application/json'});
452
+ const url = URL.createObjectURL(blob);
453
+ const a = document.createElement('a');
454
+ a.href = url;
455
+ a.download = `pmc-complete-db-${new Date().toISOString().split('T')[0]}.json`;
456
+ a.click();
457
+ URL.revokeObjectURL(url);
458
+ ui.showMessage('Database saved!');
459
+ },
460
+ loadDb: (el) => {
461
+ const file = el.files[0];
462
+ if (!file) return;
463
+ const reader = new FileReader();
464
+ reader.onload = (e) => {
465
+ try {
466
+ const loadedDb = JSON.parse(e.target.result);
467
+ if (loadedDb.staff && loadedDb.students) {
468
+ state.db = loadedDb;
469
+ if(!state.db.subjects) state.db.subjects = [];
470
+ if(!state.db.timetable) state.db.timetable = {};
471
+ ui.showMessage('Database loaded successfully!');
472
+ document.getElementById('save-db-btn').classList.remove('hidden');
473
+ } else { ui.showMessage('Invalid DB file.', true); }
474
+ } catch (err) { ui.showMessage('Error parsing DB file.', true); }
475
+ };
476
+ reader.readAsText(file);
477
+ },
478
+ register: () => {
479
+ if (!state.db) return ui.showMessage('Load a database first.', true);
480
+ const username = document.getElementById('register-username').value;
481
+ const email = document.getElementById('register-email').value;
482
+ const department = document.getElementById('register-department').value;
483
+ const position = document.getElementById('register-position').value;
484
+ const password = document.getElementById('register-password').value;
485
+
486
+ if (!username || !email || !department || !position || !password) return ui.showMessage('All fields are required.', true);
487
+ if (state.db.staff.find(s => s.username === username)) return ui.showMessage('Username already exists.', true);
488
+
489
+ state.db.staff.push({ id: `staff-${Date.now()}`, username, email, department, position, password });
490
+ ui.showMessage('Staff registered! Please save the database.');
491
+ ui.render();
492
+ },
493
+ login: () => {
494
+ if (!state.db) return ui.showMessage('Load a database first.', true);
495
+ const username = document.getElementById('login-username').value;
496
+ const password = document.getElementById('login-password').value;
497
+ const staff = state.db.staff.find(s => s.username === username && s.password === password);
498
+ if (staff) {
499
+ state.currentStaff = staff;
500
+ logic.switchView('department');
501
+ } else { ui.showMessage('Invalid credentials.', true); }
502
+ },
503
+ logout: () => {
504
+ state.currentStaff = null;
505
+ state.selectedDept = null;
506
+ state.selectedYear = null;
507
+ logic.switchView('login');
508
+ },
509
+ selectDept: (el) => {
510
+ state.selectedDept = el.dataset.dept;
511
+ logic.switchView('year');
512
+ },
513
+ selectYear: (el) => {
514
+ state.selectedYear = el.dataset.year;
515
+ logic.switchView('attendanceEntry');
516
+ },
517
+ addStudent: () => {
518
+ if (!state.selectedDept || !state.selectedYear) return ui.showMessage('Select class from Home first.', true);
519
+ const name = document.getElementById('student-name-input').value;
520
+ const regNo = document.getElementById('student-regno-input').value;
521
+ if (!name || !regNo) return ui.showMessage('Name and Register No. are required.', true);
522
+ if (state.db.students.find(s => s.regNo.toLowerCase() === regNo.toLowerCase())) return ui.showMessage('Register number already exists.', true);
523
+
524
+ state.db.students.push({ id: `student-${Date.now()}`, name, regNo, department: state.selectedDept, year: state.selectedYear, attendance: {} });
525
+ ui.showMessage('Student added. Remember to save the database!');
526
+ ui.render();
527
+ },
528
+ addSubject: () => {
529
+ const name = document.getElementById('subject-name-input').value.trim();
530
+ if (!name) return ui.showMessage('Subject name cannot be empty.', true);
531
+ state.db.subjects.push({ id: `sub-${Date.now()}`, name, staffId: state.currentStaff.id });
532
+ ui.showMessage('Subject added. Remember to save the database!');
533
+ ui.render();
534
+ },
535
+ saveTimetable: () => {
536
+ if (!state.db.timetable[state.selectedDept]) state.db.timetable[state.selectedDept] = {};
537
+ if (!state.db.timetable[state.selectedDept][state.selectedYear]) state.db.timetable[state.selectedDept][state.selectedYear] = {};
538
+
539
+ document.querySelectorAll('.timetable-select').forEach(select => {
540
+ const day = select.dataset.day;
541
+ const hour = select.dataset.hour;
542
+ const subjectId = select.value;
543
+ if (!state.db.timetable[state.selectedDept][state.selectedYear][day]) {
544
+ state.db.timetable[state.selectedDept][state.selectedYear][day] = {};
545
+ }
546
+ if (subjectId) {
547
+ state.db.timetable[state.selectedDept][state.selectedYear][day][hour] = subjectId;
548
+ } else {
549
+ delete state.db.timetable[state.selectedDept][state.selectedYear][day][hour];
550
+ }
551
+ });
552
+ ui.showMessage('Timetable saved. Remember to save the database!');
553
+ },
554
+ submitAttendance: () => {
555
+ const date = document.getElementById('attendance-date').value;
556
+ const hour = document.getElementById('attendance-hour').value;
557
+ const { subjectId } = logic.getScheduledSubject();
558
+
559
+ const absentCheckboxes = document.querySelectorAll('#attendance-student-list input[type="checkbox"]:checked');
560
+ const absentRegNos = Array.from(absentCheckboxes).map(cb => cb.dataset.regno);
561
+
562
+ const studentsInClass = state.db.students.filter(s => s.department === state.selectedDept && s.year == state.selectedYear);
563
+ studentsInClass.forEach(student => {
564
+ if (!student.attendance[date]) student.attendance[date] = {};
565
+ student.attendance[date][hour] = { status: absentRegNos.includes(student.regNo) ? 'A' : 'P', subjectId };
566
+ });
567
+ ui.showMessage(`Attendance for Hour ${hour} recorded. Save DB to persist.`);
568
+ },
569
+ selectPeriod: (el) => {
570
+ document.querySelectorAll('.period-btn').forEach(b => b.className = 'period-btn flex-1 bg-gray-200 text-gray-800 py-2 rounded-lg');
571
+ el.className = 'period-btn flex-1 bg-purple-800 text-white py-2 rounded-lg';
572
+ logic.generateReport(el.dataset.period);
573
+ },
574
+ shareReport: () => {
575
+ const periodEl = document.querySelector('.period-btn.bg-purple-800');
576
+ if (!periodEl) return ui.showMessage('Please generate a report first.', true);
577
+
578
+ const hod = state.db.staff.find(s => s.department === state.selectedDept && s.position === 'HOD');
579
+ const advisor = state.db.staff.find(s => s.department === state.selectedDept && s.position === 'Class Advisor');
580
+ const emails = [hod?.email, advisor?.email].filter(Boolean);
581
+ if(emails.length === 0) return ui.showMessage('No HOD or Advisor email found for this department.', true);
582
+
583
+ // This part is left as an exercise for the user to implement based on their needs
584
+ ui.showMessage(`This would open an email to: ${emails.join(', ')}`, false);
585
+ },
586
+ downloadReport: () => {
587
+ if (!state.db || !state.selectedDept || !state.selectedYear) return ui.showMessage('Select a class first.', true);
588
+ const studentsInClass = state.db.students.filter(s => s.department === state.selectedDept && s.year == state.selectedYear);
589
+ if (studentsInClass.length === 0) return ui.showMessage('No students in this class.', true);
590
+
591
+ let csvContent = "data:text/csv;charset=utf-8,Date,Hour,Register Number,Name,Department,Year,Subject,Status\r\n";
592
+
593
+ studentsInClass.forEach(student => {
594
+ Object.keys(student.attendance).sort().forEach(date => {
595
+ Object.keys(student.attendance[date]).sort((a,b) => a-b).forEach(hour => {
596
+ const record = student.attendance[date][hour];
597
+ const subject = (state.db.subjects || []).find(s => s.id === record.subjectId);
598
+ const subjectName = subject ? subject.name.replace(/,/g, '') : 'General';
599
+ const status = record.status === 'P' ? 'Present' : 'Absent';
600
+ let row = [date, hour, student.regNo, student.name.replace(/,/g, ''), student.department, student.year, subjectName, status].join(',');
601
+ csvContent += row + '\r\n';
602
+ });
603
+ });
604
+ });
605
+
606
+ const encodedUri = encodeURI(csvContent);
607
+ const link = document.createElement("a");
608
+ link.setAttribute("href", encodedUri);
609
+ link.setAttribute("download", `Full_Report_${state.selectedDept}_${state.selectedYear}yr.csv`);
610
+ document.body.appendChild(link);
611
+ link.click();
612
+ document.body.removeChild(link);
613
+ },
614
+ analyzeStudent: async (el) => {
615
+ const studentId = el.dataset.studentid;
616
+ const student = state.db.students.find(s => s.id === studentId);
617
+ if (!student) return;
618
+
619
+ ui.showModal('<div class="flex justify-center items-center p-8"><div class="loader"></div></div>');
620
+
621
+ const period = document.querySelector('.period-btn.bg-purple-800').dataset.period;
622
+ const { startDate, endDate } = util.getDateRange(period);
623
+
624
+ let absentDetails = [];
625
+ Object.keys(student.attendance).forEach(dateStr => {
626
+ const recordDate = new Date(dateStr);
627
+ if (recordDate >= startDate && recordDate <= endDate) {
628
+ const hours = student.attendance[dateStr];
629
+ Object.keys(hours).forEach(hour => {
630
+ if (hours[hour].status === 'A') {
631
+ const subject = (state.db.subjects || []).find(s => s.id === hours[hour].subjectId);
632
+ absentDetails.push(`- On ${dateStr} for Hour ${hour} (Subject: ${subject ? subject.name : 'General'})`);
633
+ }
634
+ });
635
+ }
636
+ });
637
+
638
+ const prompt = `Analyze the attendance of a student named ${student.name} for the selected period. Here is the list of their absences:\n${absentDetails.length > 0 ? absentDetails.join('\n') : 'This student has no absences in this period.'}\n\nBased on this data, write a concise, professional summary suitable for a teacher or parent. If attendance is good, provide positive reinforcement. If attendance is poor (more than 3 absences), express concern and suggest monitoring. Start the summary with the student's name. Keep it to 2-3 short paragraphs.`;
639
+
640
+ const analysis = await logic.callGeminiAPI(prompt);
641
+ ui.showModal(`<p>${analysis.replace(/\n/g, '<br>')}</p>`);
642
+ },
643
+ closeModal: () => ui.hideModal(),
644
+ };
645
+
646
+ // --- Utility Functions ---
647
+ const util = {
648
+ getYearSuffix: (year) => {
649
+ if (year == 1) return 'st'; if (year == 2) return 'nd'; if (year == 3) return 'rd'; return 'th';
650
+ },
651
+ capitalize: (s) => s.charAt(0).toUpperCase() + s.slice(1),
652
+ getViewTitle: (view) => {
653
+ const titles = { department: 'Select Department', year: state.selectedDept || 'Select Year', studentManagement: 'Manage Students', attendanceEntry: 'Take Attendance', reports: 'Reports & Analytics', manage: 'Management', subjects: 'My Subjects', timetable: 'Set Timetable', profile: 'My Profile', dbManager: 'Database Settings' };
654
+ return titles[view] || 'Attendance';
655
+ },
656
+ getDateRange: (period) => {
657
+ const today = new Date();
658
+ let startDate = new Date(today);
659
+ let endDate = new Date(today);
660
+ startDate.setHours(0, 0, 0, 0);
661
+ endDate.setHours(23, 59, 59, 999);
662
+
663
+ if (period === 'week') {
664
+ startDate.setDate(today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1));
665
+ } else if (period === 'month') {
666
+ startDate = new Date(today.getFullYear(), today.getMonth(), 1);
667
+ }
668
+ return { startDate, endDate };
669
+ }
670
+ };
671
+
672
+ // --- Central Event Listener ---
673
+ document.body.addEventListener('click', (e) => {
674
+ let target = e.target;
675
+ while(target && target !== document.body) {
676
+ const action = target.dataset.action;
677
+ const view = target.dataset.view;
678
+ const period = target.dataset.period;
679
+ if (action && actions[action]) { e.preventDefault(); actions[action](target); return; }
680
+ if (view && actions.switchView) { e.preventDefault(); actions.switchView(target); return; }
681
+ if (period && actions.selectPeriod) { e.preventDefault(); actions.selectPeriod(target); return; }
682
+ target = target.parentElement;
683
+ }
684
+ });
685
+
686
+ document.body.addEventListener('change', (e) => {
687
+ if (e.target.id === 'load-db-input') actions.loadDb(e.target);
688
+ if (e.target.id === 'attendance-hour') ui.render(); // Re-render to update scheduled subject
689
+ });
690
+
691
+ // --- Initial Load ---
692
+ logic.switchView('login');
693
+ });
694
+ </script>
695
+ </body>
696
  </html>