{

"document": {
"title": "School Results Portal (Nigeria K–12 System)",
"version": "1.0",
"preparedFor": "Nigerian Primary & Secondary Institutions",
"platform": "Web (Mobile-first, responsive)"
},
"productOverview": {
"description": "The School Results Portal is a secure online platform designed to manage student academic records for Nigerian primary and secondary schools. It enables teachers to create and manage student profiles, upload results per term, and allows students (or parents) to access and download official result sheets.",
"purpose": "The platform modernizes the manual result-processing flow, reduces errors, and ensures easy access for parents, teachers, and administrators."
},
"goalsAndObjectives": [
"Digitize student result management for all classes (Primary 1–6, JSS1–3, SS1–3)",
"Enable teachers to efficiently create student profiles and upload results",
"Provide parents/students with secure access to termly result sheets",
"Reduce paper usage, eliminate loss of result sheets",
"Support scalability for multi-school usage (optional)"
],
"keyUsers": {
"teachers": {
"capabilities": [
"Create/edit student profiles",
"Upload/modify term results",
"Print student results",
"View summary per class"
]
},
"studentsParents": {
"capabilities": [
"Securely log in",
"View results",
"Download PDF result sheets"
]
},
"schoolAdmin": {
"capabilities": [
"Manage teachers",
"Configure academic sessions, classes, subjects",
"Monitor activity logs"
]
}
},
"coreFeatures": {
"teacherDashboard": {
"description": "A clean dashboard showing:",
"elements": [
"Number of students in each class",
"Pending result uploads",
"Recent activities",
"Quick actions (Add Student, Upload Scores, View Class List)"
]
},
"studentProfileManagement": {
"features": [
"Create student profile",
"Upload passport photo",
"Edit or deactivate profile",
"View class list",
"Promote students to the next class at session end"
],
"profileFields": {
"name": "string",
"gender": "string",
"dateOfBirth": "date",
"admissionNumber": "string (unique)",
"classAndArm": "string",
"parentContact": "string (optional)"
},
"validationRules": [
"Admission number must be unique",
"All required fields must be filled before saving"
]
},
"resultUploadModule": {
"description": "Teachers upload results for each student per term",
"dataFields": {
"academicSession": "string",
"term": "enum [1st, 2nd, 3rd]",
"class": "string",
"subjectScores": {
"ca1": "number (max: 10)",
"ca2": "number (max: 10)",
"exam": "number (max: 70)",
"total": "auto-calculated"
},
"teacherComments": "string",
"principalComments": "string (admin only)",
"attendanceAndConduct": "string (optional)"
},
"features": [
"Bulk upload using Excel/CSV",
"Auto-calculated grades (A–F based on Nigerian standard)",
"Auto-ranking per class",
"Auto GPA/average (optional)",
"Editable until results are published"
]
},
"resultPublishingWorkflow": {
"steps": [
"Teacher uploads",
"Admin reviews",
"Admin approves",
"Student can view/download"
],
"note": "Teachers cannot edit after admin approval unless 'Reopen' is granted"
},
"studentResultViewing": {
"loginMethods": [
"Admission Number + Password/Access Code"
],
"features": [
"View results per term",
"View continuous assessment & exam breakdown",
"View class position, grade interpretation",
"Download result as PDF",
"Printable layout (A4 official school format)"
],
"pdfFormat": {
"includes": [
"Student details and passport",
"Term and session",
"Scores & grades per subject",
"Attendance",
"Teacher comment",
"Principal comment",
"School logo",
"Signature placeholders",
"QR code for verification (optional)"
]
}
}
},
"additionalFeatures": [
{
"name": "Multi-school support",
"description": "Each school has separate admin + settings",
"status": "optional"
},
{
"name": "SMS/Email Notification",
"description": "Notify parents when results are published",
"status": "optional"
},
{
"name": "Role-based access control",
"roles": ["Admin", "Teacher", "Student", "Parent (optional account)"],
"status": "optional"
},
{
"name": "Data Analytics Dashboard",
"description": "Performance trends per class or student",
"status": "optional"
}
],
"systemRequirements": {
"functional": [
"Users must authenticate to access their dashboards",
"Teachers can create and edit student profiles",
"Teachers can upload results per term",
"Results must be auto-calculated and ranked",
"Students can view and download official results",
"Admin can approve or reject uploaded results",
"System must generate a standard PDF sheet",
"System must maintain a secure audit trail"
],
"nonFunctional": {
"performance": {
"studentCapacity": "1000+ students per school",
"pageLoadTime": "within 3 seconds"
},
"security": [
"Encrypted passwords (bcrypt)",
"SSL (HTTPS)",
"Student access code prevents unauthorized viewing",
"No direct file access (use secure download handler)"
],
"scalability": [
"Support multiple schools",
"Optimized database queries"
],
"reliability": {
"uptime": "99% target",
"backup": "Automated daily backup"
}
}
},
"technologyStack": {
"frontend": [
"HTML5, CSS3, JavaScript",
"Tailwind or Bootstrap",
"Vue/React (optional)"
],
"backend": [
"PHP (Laravel or Core PHP)",
"MySQL or PostgreSQL"
],
"others": [
"DomPDF or mPDF for PDF generation",
"Cloud hosting (DigitalOcean, AWS, or shared hosting)"
]
},
"informationArchitecture": {
"routes": {
"public": ["/login"],
"admin": [
"/admin/dashboard",
"/admin/teachers",
"/admin/classes",
"/admin/subjects",
"/admin/settings"
],
"teacher": [
"/teacher/dashboard",
"/teacher/students",
"/teacher/students/create",
"/teacher/students/{id}/edit",
"/teacher/results/upload",
"/teacher/results/view"
],
"student": [
"/student/login",
"/student/dashboard",
"/student/results",
"/student/results/{term}"
]
}
},
"userFlows": {
"teacherCreatingStudentProfile": [
"Login → Dashboard",
"Click 'Add Student'",
"Fill form → Upload photo → Save",
"Student added to class list"
],
"teacherUploadingResults": [
"Select class & subject",
"Enter scores or upload CSV",
"Save draft",
"Submit for approval"
],
"studentViewingDownloadingResults": [
"Login with Admission Number",
"Select Session & Term",
"View result page",
"Click 'Download PDF'"
]
},
"successMetrics": [
{
"metric": "Reduction in manual record errors",
"target": "90%"
},
{
"metric": "Reduction in time spent preparing results",
"target": "50%"
},
{
"metric": "Parent adoption rate",
"target": "90%"
},
{
"metric": "Average time to generate PDF result",
"target": "Under 1 minute"
}
]
}

README.md

@@ -1,10 +1,13 @@
 ---
-title: Edutrack Naija
-emoji: 🚀
-colorFrom: red
-colorTo: blue
+title: EduTrack Naija 📚✨
+colorFrom: pink
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

add-student.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Add Student | EduTrack Naija</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex items-center mb-8">
+            <a href="teacher-dashboard.html" class="mr-4 text-green-600 hover:text-green-800">
+                <i data-feather="arrow-left"></i>
+            </a>
+            <h1 class="text-3xl font-bold text-green-700">Add New Student</h1>
+        </div>
+        
+        <div class="bg-white p-6 rounded-lg shadow-md">
+            <form id="studentForm">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="firstName">First Name</label>
+                        <input type="text" id="firstName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="lastName">Last Name</label>
+                        <input type="text" id="lastName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="gender">Gender</label>
+                        <select id="gender" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
+                            <option value="">Select Gender</option>
+                            <option value="male">Male</option>
+                            <option value="female">Female</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="dob">Date of Birth</label>
+                        <input type="date" id="dob" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="admissionNumber">Admission Number</label>
+                        <input type="text" id="admissionNumber" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="class">Class</label>
+                        <select id="class" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
+                            <option value="">Select Class</option>
+                            <option value="primary1">Primary 1</option>
+                            <option value="primary2">Primary 2</option>
+                            <option value="primary3">Primary 3</option>
+                            <option value="primary4">Primary 4</option>
+                            <option value="primary5">Primary 5</option>
+                            <option value="primary6">Primary 6</option>
+                            <option value="jss1">JSS 1</option>
+                            <option value="jss2">JSS 2</option>
+                            <option value="jss3">JSS 3</option>
+                            <option value="ss1">SS 1</option>
+                            <option value="ss2">SS 2</option>
+                            <option value="ss3">SS 3</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="arm">Arm (if applicable)</label>
+                        <select id="arm" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
+                            <option value="">Select Arm</option>
+                            <option value="a">A</option>
+                            <option value="b">B</option>
+                            <option value="c">C</option>
+                            <option value="science">Science</option>
+                            <option value="arts">Arts</option>
+                            <option value="commercial">Commercial</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="parentContact">Parent Contact</label>
+                        <input type="tel" id="parentContact" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
+                    </div>
+                </div>
+                
+                <div class="mb-6">
+                    <label class="block text-gray-700 mb-2">Passport Photo</label>
+                    <div class="flex items-center">
+                        <div class="mr-4">
+                            <div class="w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center overflow-hidden">
+                                <img id="previewPhoto" src="http://static.photos/people/200x200" alt="Passport preview" class="w-full h-full object-cover hidden">
+                                <i data-feather="user" class="text-gray-400 w-12 h-12"></i>
+                            </div>
+                        </div>
+                        <div>
+                            <input type="file" id="passportPhoto" accept="image/*" class="hidden">
+                            <button type="button" onclick="document.getElementById('passportPhoto').click()" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300 transition duration-300">
+                                <i data-feather="upload" class="mr-2"></i> Upload Photo
+                            </button>
+                            <p class="text-sm text-gray-500 mt-1">Max size: 2MB (JPG/PNG)</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="flex justify-end">
+                    <button type="button" class="bg-gray-200 text-gray-700 px-6 py-2 rounded-md mr-4 hover:bg-gray-300 transition duration-300">
+                        Cancel
+                    </button>
+                    <button type="submit" class="bg-green-600 text-white px-6 py-2 rounded-md hover:bg-green-700 transition duration-300 flex items-center">
+                        <i data-feather="save" class="mr-2"></i> Save Student
+                    </button>
+                </div>
+            </form>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script>
+        feather.replace();
+        
+        // Preview passport photo
+        document.getElementById('passportPhoto').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    const preview = document.getElementById('previewPhoto');
+                    preview.src = event.target.result;
+                    preview.classList.remove('hidden');
+                    preview.nextElementSibling.classList.add('hidden');
+                }
+                reader.readAsDataURL(file);
+            }
+        });
+        
+        // Form submission
+        document.getElementById('studentForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            // In a real app, this would submit to the server
+            alert('Student profile saved successfully!');
+            window.location.href = 'teacher-dashboard.html';
+        });
+    </script>
+    <script src="script.js"></script>
+</body>
+</html>

components/footer.js

@@ -0,0 +1,74 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .footer {
+          background-color: #2d3748;
+          color: #fff;
+        }
+        .footer-link {
+          transition: color 0.3s ease;
+        }
+        .footer-link:hover {
+          color: #38a169;
+        }
+        .social-icon {
+          transition: all 0.3s ease;
+        }
+        .social-icon:hover {
+          color: #38a169;
+          transform: translateY(-3px);
+        }
+      </style>
+      <footer class="footer py-12">
+        <div class="container mx-auto px-4">
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div>
+              <h3 class="text-xl font-bold mb-4 text-green-400">Naija Scholar Tracker</h3>
+              <p class="text-gray-400">Nigeria's premier secondary school results portal for students, parents, and educators.</p>
+            </div>
+            
+            <div>
+              <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
+              <ul class="space-y-2">
+                <li><a href="index.html" class="footer-link text-gray-400">Home</a></li>
+                <li><a href="results.html" class="footer-link text-gray-400">Results</a></li>
+                <li><a href="schools.html" class="footer-link text-gray-400">Schools</a></li>
+                <li><a href="about.html" class="footer-link text-gray-400">About Us</a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h4 class="text-lg font-semibold mb-4">Exam Bodies</h4>
+              <ul class="space-y-2">
+                <li><a href="#" class="footer-link text-gray-400">WAEC</a></li>
+                <li><a href="#" class="footer-link text-gray-400">NECO</a></li>
+                <li><a href="#" class="footer-link text-gray-400">JAMB</a></li>
+                <li><a href="#" class="footer-link text-gray-400">BECE</a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h4 class="text-lg font-semibold mb-4">Connect With Us</h4>
+              <div class="flex space-x-4 mb-4">
+                <a href="#" class="social-icon text-gray-400"><i data-feather="facebook"></i></a>
+                <a href="#" class="social-icon text-gray-400"><i data-feather="twitter"></i></a>
+                <a href="#" class="social-icon text-gray-400"><i data-feather="instagram"></i></a>
+                <a href="#" class="social-icon text-gray-400"><i data-feather="linkedin"></i></a>
+              </div>
+              <p class="text-gray-400">Email: info@naijascholar.com</p>
+              <p class="text-gray-400">Phone: +234 812 345 6789</p>
+            </div>
+          </div>
+          
+          <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+            <p>&copy; ${new Date().getFullYear()} Naija Scholar Tracker. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,83 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .navbar {
+          background-color: #fff;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .nav-link {
+          transition: color 0.3s ease;
+        }
+        .nav-link:hover {
+          color: #38a169;
+        }
+        .mobile-menu {
+          max-height: 0;
+          overflow: hidden;
+          transition: max-height 0.3s ease-out;
+        }
+        .mobile-menu.open {
+          max-height: 500px;
+        }
+      </style>
+      <nav class="navbar">
+        <div class="container mx-auto px-4 py-4">
+          <div class="flex justify-between items-center">
+            <div class="flex items-center">
+              <a href="index.html" class="flex items-center">
+                <i data-feather="book-open" class="text-green-600 w-6 h-6 mr-2"></i>
+                <span class="text-xl font-bold text-green-700">Naija Scholar</span>
+              </a>
+            </div>
+            <div class="hidden md:flex space-x-8">
+              <a href="index.html" class="nav-link text-gray-700 font-medium">Home</a>
+              <a href="teacher-dashboard.html" class="nav-link text-gray-700 font-medium">Teacher Portal</a>
+              <a href="results.html" class="nav-link text-gray-700 font-medium">Results</a>
+              <a href="schools.html" class="nav-link text-gray-700 font-medium">Schools</a>
+              <a href="about.html" class="nav-link text-gray-700 font-medium">About</a>
+              <a href="contact.html" class="nav-link text-gray-700 font-medium">Contact</a>
+            </div>
+<div class="hidden md:block">
+              <a href="login.html" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition duration-300">Login</a>
+            </div>
+            
+            <button class="md:hidden focus:outline-none" id="mobile-menu-button">
+              <i data-feather="menu" class="w-6 h-6"></i>
+            </button>
+          </div>
+          
+          <div class="mobile-menu md:hidden mt-2" id="mobile-menu">
+            <div class="flex flex-col space-y-3 py-3">
+              <a href="index.html" class="nav-link text-gray-700">Home</a>
+              <a href="teacher-dashboard.html" class="nav-link text-gray-700">Teacher Portal</a>
+              <a href="results.html" class="nav-link text-gray-700">Results</a>
+              <a href="schools.html" class="nav-link text-gray-700">Schools</a>
+              <a href="about.html" class="nav-link text-gray-700">About</a>
+              <a href="contact.html" class="nav-link text-gray-700">Contact</a>
+              <a href="login.html" class="bg-green-600 text-white px-4 py-2 rounded-md text-center hover:bg-green-700 transition duration-300">Login</a>
+            </div>
+</div>
+        </div>
+      </nav>
+    `;
+    
+    // Mobile menu toggle
+    const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
+    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+    
+    mobileMenuButton.addEventListener('click', () => {
+      mobileMenu.classList.toggle('open');
+      const icon = mobileMenuButton.querySelector('i');
+      if (mobileMenu.classList.contains('open')) {
+        icon.setAttribute('data-feather', 'x');
+      } else {
+        icon.setAttribute('data-feather', 'menu');
+      }
+      feather.replace();
+    });
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,118 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Naija Scholar Tracker | School Results Portal</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="text-center py-12">
+            <h1 class="text-4xl font-bold text-green-700 mb-4">Welcome to Naija Scholar Tracker</h1>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Nigeria's premier secondary school results portal for students, parents, and educators</p>
+        </section>
+
+        <!-- Search Section -->
+        <section class="bg-white rounded-lg shadow-md p-6 mb-12 max-w-4xl mx-auto">
+            <h2 class="text-2xl font-semibold text-green-700 mb-6">Check Your Results</h2>
+            <form class="space-y-4">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="exam-type">Exam Type</label>
+                        <select id="exam-type" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
+                            <option value="">Select Exam Type</option>
+                            <option value="waec">WAEC</option>
+                            <option value="neco">NECO</option>
+                            <option value="jamb">JAMB</option>
+                            <option value="bece">BECE</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="exam-year">Exam Year</label>
+                        <select id="exam-year" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
+                            <option value="">Select Year</option>
+                            <option value="2023">2023</option>
+                            <option value="2022">2022</option>
+                            <option value="2021">2021</option>
+                        </select>
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-gray-700 mb-2" for="exam-number">Exam Number</label>
+                    <input type="text" id="exam-number" placeholder="Enter your exam number" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
+                </div>
+                <button type="submit" class="w-full bg-green-600 text-white py-3 px-4 rounded-md hover:bg-green-700 transition duration-300 flex items-center justify-center">
+                    <i data-feather="search" class="mr-2"></i> Check Results
+                </button>
+            </form>
+        </section>
+
+        <!-- Features Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center text-green-700 mb-12">Our Features</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white p-6 rounded-lg shadow-md text-center">
+                    <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="file-text" class="text-green-600 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Result Verification</h3>
+                    <p class="text-gray-600">Verify your exam results instantly with our secure platform</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md text-center">
+                    <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="trending-up" class="text-green-600 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Performance Analysis</h3>
+                    <p class="text-gray-600">Get detailed analysis of your academic performance</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md text-center">
+                    <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="shield" class="text-green-600 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Secure Access</h3>
+                    <p class="text-gray-600">Your data is protected with advanced security measures</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Stats Section -->
+        <section class="bg-green-700 text-white rounded-lg p-8 mb-12">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
+                <div>
+                    <div class="text-4xl font-bold mb-2">50K+</div>
+                    <div class="text-green-200">Students</div>
+                </div>
+                <div>
+                    <div class="text-4xl font-bold mb-2">10K+</div>
+                    <div class="text-green-200">Schools</div>
+                </div>
+                <div>
+                    <div class="text-4xl font-bold mb-2">5+</div>
+                    <div class="text-green-200">Exam Bodies</div>
+                </div>
+                <div>
+                    <div class="text-4xl font-bold mb-2">99%</div>
+                    <div class="text-green-200">Accuracy</div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,65 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Form submission handler
+    const resultForm = document.querySelector('form');
+    if (resultForm) {
+        resultForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const examType = document.getElementById('exam-type').value;
+            const examYear = document.getElementById('exam-year').value;
+            const examNumber = document.getElementById('exam-number').value;
+            
+            if (!examType || !examYear || !examNumber) {
+                alert('Please fill in all fields');
+                return;
+            }
+            
+            // In a real app, this would make an API call
+            console.log('Searching for:', { examType, examYear, examNumber });
+            
+            // Simulate loading
+            const submitBtn = resultForm.querySelector('button[type="submit"]');
+            const originalText = submitBtn.innerHTML;
+            submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Searching...';
+            submitBtn.disabled = true;
+            
+            setTimeout(() => {
+                submitBtn.innerHTML = originalText;
+                submitBtn.disabled = false;
+                feather.replace();
+                
+                // Redirect to results page (would be dynamic in real app)
+                window.location.href = `results.html?type=${examType}&year=${examYear}&number=${examNumber}`;
+            }, 1500);
+        });
+    }
+    
+    // Initialize tooltips
+    const tooltipElements = document.querySelectorAll('[data-tooltip]');
+    tooltipElements.forEach(el => {
+        el.addEventListener('mouseenter', showTooltip);
+        el.addEventListener('mouseleave', hideTooltip);
+    });
+});
+
+function showTooltip(e) {
+    const tooltipText = this.getAttribute('data-tooltip');
+    const tooltip = document.createElement('div');
+    tooltip.className = 'tooltip absolute bg-gray-800 text-white text-xs px-2 py-1 rounded z-50';
+    tooltip.textContent = tooltipText;
+    
+    document.body.appendChild(tooltip);
+    
+    const rect = this.getBoundingClientRect();
+    tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`;
+    tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
+    
+    this.tooltip = tooltip;
+}
+
+function hideTooltip() {
+    if (this.tooltip) {
+        this.tooltip.remove();
+        this.tooltip = null;
+    }
+}

style.css

@@ -1,28 +1,50 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Poppins', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #38a169;
+    border-radius: 4px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #2f855a;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Animation for buttons */
+.btn-animate {
+    transition: all 0.3s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.btn-animate:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Pulse animation for important elements */
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+    100% {
+        transform: scale(1);
+    }
 }
+
+.pulse {
+    animation: pulse 2s infinite;
+}

teacher-dashboard.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Teacher Dashboard | EduTrack Naija</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <h1 class="text-3xl font-bold text-green-700 mb-8">Teacher Dashboard</h1>
+        
+        <!-- Stats Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <div class="flex items-center">
+                    <div class="bg-green-100 p-3 rounded-full mr-4">
+                        <i data-feather="users" class="text-green-600"></i>
+                    </div>
+                    <div>
+                        <p class="text-gray-500">Total Students</p>
+                        <h3 class="text-2xl font-bold">245</h3>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <div class="flex items-center">
+                    <div class="bg-blue-100 p-3 rounded-full mr-4">
+                        <i data-feather="file-text" class="text-blue-600"></i>
+                    </div>
+                    <div>
+                        <p class="text-gray-500">Pending Uploads</p>
+                        <h3 class="text-2xl font-bold">3</h3>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <div class="flex items-center">
+                    <div class="bg-yellow-100 p-3 rounded-full mr-4">
+                        <i data-feather="alert-circle" class="text-yellow-600"></i>
+                    </div>
+                    <div>
+                        <p class="text-gray-500">Pending Approvals</p>
+                        <h3 class="text-2xl font-bold">2</h3>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <div class="flex items-center">
+                    <div class="bg-purple-100 p-3 rounded-full mr-4">
+                        <i data-feather="activity" class="text-purple-600"></i>
+                    </div>
+                    <div>
+                        <p class="text-gray-500">Recent Activities</p>
+                        <h3 class="text-2xl font-bold">15</h3>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Quick Actions -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+            <a href="add-student.html" class="bg-green-600 text-white p-4 rounded-lg shadow-md hover:bg-green-700 transition duration-300 flex items-center justify-center">
+                <i data-feather="user-plus" class="mr-2"></i> Add Student
+            </a>
+            <a href="upload-results.html" class="bg-blue-600 text-white p-4 rounded-lg shadow-md hover:bg-blue-700 transition duration-300 flex items-center justify-center">
+                <i data-feather="upload" class="mr-2"></i> Upload Results
+            </a>
+            <a href="class-list.html" class="bg-yellow-600 text-white p-4 rounded-lg shadow-md hover:bg-yellow-700 transition duration-300 flex items-center justify-center">
+                <i data-feather="list" class="mr-2"></i> View Class List
+            </a>
+            <a href="reports.html" class="bg-purple-600 text-white p-4 rounded-lg shadow-md hover:bg-purple-700 transition duration-300 flex items-center justify-center">
+                <i data-feather="bar-chart-2" class="mr-2"></i> Generate Reports
+            </a>
+        </div>
+        
+        <!-- Recent Activities -->
+        <div class="bg-white p-6 rounded-lg shadow-md mb-8">
+            <h2 class="text-xl font-semibold text-gray-800 mb-4">Recent Activities</h2>
+            <div class="space-y-4">
+                <div class="flex items-start">
+                    <div class="bg-green-100 p-2 rounded-full mr-4">
+                        <i data-feather="check-circle" class="text-green-600"></i>
+                    </div>
+                    <div>
+                        <p class="font-medium">Uploaded SS2 Science results</p>
+                        <p class="text-sm text-gray-500">Today, 10:45 AM</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-blue-100 p-2 rounded-full mr-4">
+                        <i data-feather="user-plus" class="text-blue-600"></i>
+                    </div>
+                    <div>
+                        <p class="font-medium">Added new student: Adeola Johnson</p>
+                        <p class="text-sm text-gray-500">Yesterday, 3:20 PM</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-yellow-100 p-2 rounded-full mr-4">
+                        <i data-feather="alert-triangle" class="text-yellow-600"></i>
+                    </div>
+                    <div>
+                        <p class="font-medium">Results pending approval: JSS3 Mathematics</p>
+                        <p class="text-sm text-gray-500">2 days ago</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Classes Summary -->
+        <div class="bg-white p-6 rounded-lg shadow-md">
+            <h2 class="text-xl font-semibold text-gray-800 mb-4">Classes Summary</h2>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Class</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Students</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Results Uploaded</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">SS2 Science</td>
+                            <td class="px-6 py-4 whitespace-nowrap">42</td>
+                            <td class="px-6 py-4 whitespace-nowrap">3/5 subjects</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <a href="#" class="text-green-600 hover:text-green-800">View</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">JSS3 Arts</td>
+                            <td class="px-6 py-4 whitespace-nowrap">38</td>
+                            <td class="px-6 py-4 whitespace-nowrap">2/5 subjects</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <a href="#" class="text-green-600 hover:text-green-800">View</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">Primary 5A</td>
+                            <td class="px-6 py-4 whitespace-nowrap">25</td>
+                            <td class="px-6 py-4 whitespace-nowrap">4/6 subjects</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <a href="#" class="text-green-600 hover:text-green-800">View</a>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+</body>
+</html>

upload-results.html

@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Upload Results | EduTrack Naija</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex items-center mb-8">
+            <a href="teacher-dashboard.html" class="mr-4 text-green-600 hover:text-green-800">
+                <i data-feather="arrow-left"></i>
+            </a>
+            <h1 class="text-3xl font-bold text-green-700">Upload Results</h1>
+        </div>
+        
+        <div class="bg-white p-6 rounded-lg shadow-md mb-8">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                <div>
+                    <label class="block text-gray-700 mb-2" for="academicSession">Academic Session</label>
+                    <select id="academicSession" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
+                        <option value="">Select Session</option>
+                        <option value="2023-2024">2023/2024</option>
+                        <option value="2022-2023">2022/2023</option>
+                        <option value="2021-2022">2021/2022</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-gray-700 mb-2" for="term">Term</label>
+                    <select id="term" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
+                        <option value="">Select Term</option>
+                        <option value="1">First Term</option>
+                        <option value="2">Second Term</option>
+                        <option value="3">Third Term</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-gray-700 mb-2" for="class">Class</label>
+                    <select id="class" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
+                        <option value="">Select Class</option>
+                        <option value="primary1">Primary 1</option>
+                        <option value="primary2">Primary 2</option>
+                        <option value="primary3">Primary 3</option>
+                        <option value="primary4">Primary 4</option>
+                        <option value="primary5">Primary 5</option>
+                        <option value="primary6">Primary 6</option>
+                        <option value="jss1">JSS 1</option>
+                        <option value="jss2">JSS 2</option>
+                        <option value="jss3">JSS 3</option>
+                        <option value="ss1">SS 1</option>
+                        <option value="ss2">SS 2</option>
+                        <option value="ss3">SS 3</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-gray-700 mb-2" for="subject">Subject</label>
+                    <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
+                        <option value="">Select Subject</option>
+                        <option value="mathematics">Mathematics</option>
+                        <option value="english">English Language</option>
+                        <option value="physics">Physics</option>
+                        <option value="chemistry">Chemistry</option>
+                        <option value="biology">Biology</option>
+                        <option value="economics">Economics</option>
+                        <option value="geography">Geography</option>
+                        <option value="government">Government</option>
+                        <option value="literature">Literature</option>
+                        <option value="yoruba">Yoruba</option>
+                        <option value="hausa">Hausa</option>
+                        <option value="igbo">Igbo</option>
+                        <option value="french">French</option>
+                        <option value="crs">CRS</option>
+                        <option value="irs">IRS</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-gray-700 mb-2" for="uploadMethod">Upload Method</label>
+                    <select id="uploadMethod" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
+                        <option value="">Select Method</option>
+                        <option value="manual">Manual Entry</option>
+                        <option value="csv">CSV/Excel Upload</option>
+                    </select>
+                </div>
+                <div class="flex items-end">
+                    <button type="button" id="loadStudentsBtn" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition duration-300 w-full">
+                        Load Students
+                    </button>
+                </div>
+            </div>
+            
+            <div id="csvUploadSection" class="hidden mb-6">
+                <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
+                    <i data-feather="upload-cloud" class="w-12 h-12 text-gray-400 mx-auto mb-4"></i>
+                    <p class="text-gray-600 mb-4">Drag and drop your CSV/Excel file here, or click to browse</p>
+                    <input type="file" id="csvFile" accept=".csv,.xlsx,.xls" class="hidden">
+                    <button type="button" onclick="document.getElementById('csvFile').click()" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300 transition duration-300">
+                        <i data-feather="upload" class="mr-2"></i> Select File
+                    </button>
+                    <p class="text-sm text-gray-500 mt-2">Download <a href="#" class="text-green-600 hover:underline">template file</a></p>
+                </div>
+            </div>
+        </div>
+        
+        <div id="resultsTableSection" class="hidden">
+            <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Enter Scores for SS2 Science - Mathematics (2023/2024 - First Term)</h2>
+                
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Student Name</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Admission No.</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CA 1 (10)</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CA 2 (10)</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exam (70)</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total (100)</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <tr>
+                                <td class="px-6 py-4 whitespace-nowrap">Adeola Johnson</td>
+                                <td class="px-6 py-4 whitespace-nowrap">SS/2023/001</td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <input type="number" min="0" max="10" class="w-16 px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" value="8">
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <input type="number" min="0" max="10" class="w-16 px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" value="9">
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <input type="number" min="0" max="70" class="w-16 px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" value="65">
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap font-semibold">82</td>
+                            </tr>
+                            <tr>
+                                <td class="px-6 py-4 whitespace-nowrap">Chinedu Okoro</td>
+                                <td class="px-6 py-4 whitespace-nowrap">SS/2023/002</td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <input type="number" min="0" max="10" class="w-16 px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" value="7">
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <input type="number" min="0" max="10" class="w-16 px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" value="8">
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <input type="number" min="0" max="70" class="w-16 px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" value="60">
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap font-semibold">75</td>
+                            </tr>
+                            <tr>
+                                <td class="px-6 py-4 whitespace-nowrap">Fatima Bello</td>
+                                <td class="px-6 py-4 whitespace-nowrap">SS/2023/003</td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <input type="number" min="0" max="10" class="w-16 px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" value="9">
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <input type="number" min="0" max="10" class="w-16 px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" value="10">
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <input type="number" min="0" max="70" class="w-16 px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" value="68">
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap font-semibold">87</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            
+            <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Teacher Comments</h2>
+                <textarea class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" rows="4" placeholder="Enter general comments for the class..."></textarea>
+            </div>
+            
+            <div class="flex justify-end">
+                <button type="button" class="bg-gray-200 text-gray-700 px-6 py-2 rounded-md mr-4 hover:bg-gray-300 transition duration-300">
+                    Save Draft
+                </button>
+                <button type="button" class="bg-green-600 text-white px-6 py-2 rounded-md hover:bg-green-700 transition duration-300 flex items-center">
+                    <i data-feather="send" class="mr-2"></i> Submit for Approval
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script>
+        feather.replace();
+        
+        // Toggle between manual and CSV upload
+        document.getElementById('uploadMethod').addEventListener('change', function() {
+            const method = this.value;
+            const csvSection = document.getElementById('csvUploadSection');
+            const tableSection = document.getElementById('resultsTableSection');
+            
+            if (method === 'csv') {
+                csvSection.classList.remove('hidden');
+                tableSection.classList.add('hidden');
+            } else if (method === 'manual') {
+                csvSection.classList.add('hidden');
+                tableSection.classList.add('hidden');
+            }
+        });
+        
+        // Simulate loading students
+        document.getElementById('loadStudentsBtn').addEventListener('click', function() {
+            const session = document.getElementById('academicSession').value;
+            const term = document.getElementById('term').value;
+            const classVal = document.getElementById('class').value;
+            const subject = document.getElementById('subject').value;
+            
+            if (!session || !term || !classVal || !subject) {
+                alert('Please fill all required fields');
+                return;
+            }
+            
+            // Show loading
+            this.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Loading...';
+            this.disabled = true;
+            feather.replace();
+            
+            // Simulate API call
+            setTimeout(() => {
+                this.innerHTML = 'Load Students';
+                this.disabled = false;
+                document.getElementById('resultsTableSection').classList.remove('hidden');
+                feather.replace();
+            }, 1500);
+        });
+        
+        // Calculate totals when scores change
+        document.querySelectorAll('input[type="number"]').forEach(input => {
+            input.addEventListener('change', function() {
+                const row = this.closest('tr');
+                const ca1 = parseFloat(row.querySelector('td:nth-child(3) input').value) || 0;
+                const ca2 = parseFloat(row.querySelector('td:nth-child(4) input').value) || 0;
+                const exam = parseFloat(row.querySelector('td:nth-child(5) input').value) || 0;
+                const total = ca1 + ca2 + exam;
+                row.querySelector('td:nth-child(6)').textContent = total;
+            });
+        });
+    </script>
+    <script src="script.js"></script>
+</body>
+</html>