<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School Directory</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background: #333;
color: white;
text-align: center;
padding: 1rem;
}
nav {
background: #f4f4f4;
padding: 1rem;
position: sticky;
top: 0;
z-index: 100;
}
nav a {
margin: 0 15px;
text-decoration: none;
color: #333;
font-weight: bold;
}
nav a:hover {
color: #007BFF;
}
section {
padding: 2rem;
border-bottom: 1px solid #ccc;
}
.entry {
margin-bottom: 1.5rem;
padding: 1rem;
background: #f9f9f9;
border-radius: 5px;
position: relative;
}
.entry button {
margin-left: 10px;
padding: 5px 10px;
background: #007BFF;
color: white;
border: none;
cursor: pointer;
}
.entry button:hover {
background: #0056b3;
}
h2 {
color: #333;
}
.stats {
font-style: italic;
margin-bottom: 1rem;
}
form {
margin: 1rem 0;
padding: 1rem;
background: #f0f0f0;
border-radius: 5px;
}
form label {
display: block;
margin: 0.5rem 0;
}
form input, form select {
width: 100%;
max-width: 300px;
padding: 5px;
}
form button {
margin-top: 10px;
padding: 8px 15px;
background: #28a745;
color: white;
border: none;
cursor: pointer;
}
form button:hover {
background: #218838;
}
footer {
text-align: center;
padding: 1rem;
background: #333;
color: white;
}
@media (max-width: 600px) {
nav a {
display: block;
margin: 10px 0;
}
section {
padding: 1rem;
}
}
</style>
</head>
<body>
<header>
<h1>School Directory 2025</h1>
<p class="stats">Students: <span id="studentCount">2</span> | Families: <span id="familyCount">2</span> | Donations: $<span id="donationTotal">150</span></p>
</header>
<nav>
<a href="#students">Students</a>
<a href="#families">Families</a>
<a href="#donations">Donations</a>
</nav>
<section id="students">
<h2>Student Directory</h2>
<div id="studentList">
<div class="entry" data-id="S001">
<strong>[S001] Jane Doe</strong><br>
Grade: 5th, Class A<br>
Activities: Soccer, Art Club<br>
Family: <a href="#F001">[F001] John & Mary Doe</a>
<button onclick="editStudent('S001')">Edit</button>
</div>
<div class="entry" data-id="S002">
<strong>[S002] Tom Smith</strong><br>
Grade: 6th, Class B<br>
Activities: Chess Club<br>
Family: <a href="#F002">[F002] Lisa Smith</a>
<button onclick="editStudent('S002')">Edit</button>
</div>
</div>
<form id="addStudentForm" onsubmit="addStudent(event)">
<h3>Add New Student</h3>
<label>Full Name: <input type="text" name="name" required></label>
<label>Grade: <input type="text" name="grade" required></label>
<label>Activities: <input type="text" name="activities"></label>
<label>Family ID: <input type="text" name="familyId" required></label>
<button type="submit">Add Student</button>
</form>
</section>
<section id="families">
<h2>Family Directory</h2>
<div id="familyList">
<div class="entry" data-id="F001">
<strong>[F001] Doe Family</strong><br>
Primary: John Doe (Father), Mary Doe (Mother)<br>
Contact: (555) 123-4567, [email protected]<br>
Students: <a href="#S001">[S001] Jane Doe</a><br>
Emergency: Sarah Smith, (555) 987-6543
<button onclick="editFamily('F001')">Edit</button>
</div>
<div class="entry" data-id="F002">
<strong>[F002] Smith Family</strong><br>
Primary: Lisa Smith (Mother)<br>
Contact: (555) 456-7890, [email protected]<br>
Students: <a href="#S002">[S002] Tom Smith</a>
<button onclick="editFamily('F002')">Edit</button>
</div>
</div>
<form id="addFamilyForm" onsubmit="addFamily(event)">
<h3>Add New Family</h3>
<label>Family Name: <input type="text" name="name" required></label>
<label>Primary Contact: <input type="text" name="primary" required></label>
<label>Contact Info: <input type="text" name="contact" required></label>
<label>Student ID: <input type="text" name="studentId" required></label>
<button type="submit">Add Family</button>
</form>
</section>
<section id="donations">
<h2>Donation Repository</h2>
<div id="donationList">
<div class="entry" data-id="D001">
<strong>[D001]</strong><br>
Donor: <a href="#F001">John Doe</a><br>
Amount: $50 | Date: April 5, 2025<br>
Purpose: Library Fund | Status: Received<br>
Payment: Online
<button onclick="editDonation('D001')">Edit</button>
</div>
<div class="entry" data-id="D002">
<strong>[D002]</strong><br>
Donor: Anonymous<br>
Amount: $100 | Date: April 8, 2025<br>
Purpose: General Fund | Status: Received<br>
Payment: Cash
<button onclick="editDonation('D002')">Edit</button>
</div>
</div>
<form id="addDonationForm" onsubmit="addDonation(event)">
<h3>Add New Donation</h3>
<label>Donor Name: <input type="text" name="donor" required></label>
<label>Amount: <input type="number" name="amount" required></label>
<label>Date: <input type="date" name="date" required></label>
<label>Purpose: <input type="text" name="purpose" required></label>
<label>Status: <select name="status"><option>Received</option><option>Pledged</option></select></label>
<button type="submit">Add Donation</button>
</form>
</section>
<footer>
<p>Contact: [email protected] | © 2025 School Name</p>
</footer>
<script>
let studentCount = 2, familyCount = 2, donationTotal = 150;
const studentList = document.getElementById('studentList');
const familyList = document.getElementById('familyList');
const donationList = document.getElementById('donationList');
function updateStats() {
document.getElementById('studentCount').textContent = studentCount;
document.getElementById('familyCount').textContent = familyCount;
document.getElementById('donationTotal').textContent = donationTotal;
}
function addStudent(event) {
event.preventDefault();
const form = event.target;
const name = form.name.value;
const grade = form.grade.value;
const activities = form.activities.value || 'None';
const familyId = form.familyId.value;
const id = `S${String(studentCount + 1).padStart(3, '0')}`;
const entry = document.createElement('div');
entry.className = 'entry';
entry.dataset.id = id;
entry.innerHTML = `
<strong>[${id}] ${name}</strong><br>
Grade: ${grade}<br>
Activities: ${activities}<br>
Family: <a href="#${familyId}">[${familyId}]</a>
<button onclick="editStudent('${id}')">Edit</button>
`;
studentList.appendChild(entry);
studentCount++;
updateStats();
form.reset();
}
function addFamily(event) {
event.preventDefault();
const form = event.target;
const name = form.name.value;
const primary = form.primary.value;
const contact = form.contact.value;
const studentId = form.studentId.value;
const id = `F${String(familyCount + 1).padStart(3, '0')}`;
const entry = document.createElement('div');
entry.className = 'entry';
entry.dataset.id = id;
entry.id = id;
entry.innerHTML = `
<strong>[${id}] ${name}</strong><br>
Primary: ${primary}<br>
Contact: ${contact}<br>
Students: <a href="#${studentId}">[${studentId}]</a>
<button onclick="editFamily('${id}')">Edit</button>
`;
familyList.appendChild(entry);
familyCount++;
updateStats();
form.reset();
}
function addDonation(event) {
event.preventDefault();
const form = event.target;
const donor = form.donor.value;
const amount = parseInt(form.amount.value);
const date = form.date.value;
const purpose = form.purpose.value;
const status = form.status.value;
const id = `D${String(donationList.children.length + 1).padStart(3, '0')}`;
const entry = document.createElement('div');
entry.className = 'entry';
entry.dataset.id = id;
entry.innerHTML = `
<strong>[${id}]</strong><br>
Donor: ${donor}<br>
Amount: $${amount} | Date: ${date}<br>
Purpose: ${purpose} | Status: ${status}<br>
Payment: N/A
<button onclick="editDonation('${id}')">Edit</button>
`;
donationList.appendChild(entry);
donationTotal += amount;
updateStats();
form.reset();
}
function editStudent(id) {
const entry = document.querySelector(`[data-id="${id}"]`);
const name = prompt('Enter new name:', entry.querySelector('strong').textContent.slice(6));
const grade = prompt('Enter new grade:', entry.children[1].textContent.split(': ')[1]);
const activities = prompt('Enter new activities:', entry.children[2].textContent.split(': ')[1]);
const familyId = prompt('Enter new family ID:', entry.children[3].children[0].textContent.slice(1, -1));
if (name && grade && familyId) {
entry.innerHTML = `
<strong>[${id}] ${name}</strong><br>
Grade: ${grade}<br>
Activities: ${activities || 'None'}<br>
Family: <a href="#${familyId}">[${familyId}]</a>
<button onclick="editStudent('${id}')">Edit</button>
`;
}
}
function editFamily(id) {
const entry = document.querySelector(`[data-id="${id}"]`);
const name = prompt('Enter new family name:', entry.querySelector('strong').textContent.slice(6));
const primary = prompt('Enter new primary contact:', entry.children[1].textContent.split(': ')[1]);
const contact = prompt('Enter new contact info:', entry.children[2].textContent.split(': ')[1]);
const studentId = prompt('Enter new student ID:', entry.children[3].children[0].textContent.slice(1, -1));
if (name && primary && contact && studentId) {
entry.innerHTML = `
<strong>[${id}] ${name}</strong><br>
Primary: ${primary}<br>
Contact: ${contact}<br>
Students: <a href="#${studentId}">[${studentId}]</a>
<button onclick="editFamily('${id}')">Edit</button>
`;
}
}
function editDonation(id) {
const entry = document.querySelector(`[data-id="${id}"]`);
const donor = prompt('Enter new donor:', entry.children[1].textContent.split(': ')[1]);
const amount = parseInt(prompt('Enter new amount:', entry.children[2].textContent.split('$')[1].split(' ')[0]));
const date = prompt('Enter new date:', entry.children[2].textContent.split('Date: ')[1].split('<')[0]);
const purpose = prompt('Enter new purpose:', entry.children[3].textContent.split(': ')[1].split(' |')[0]);
const status = prompt('Enter new status (Received/Pledged):', entry.children[3].textContent.split('Status: ')[1].split('<')[0]);
if (donor && amount && date && purpose && status) {
const oldAmount = parseInt(entry.children[2].textContent.split('$')[1].split(' ')[0]);
donationTotal = donationTotal - oldAmount + amount;
entry.innerHTML = `
<strong>[${id}]</strong><br>
Donor: ${donor}<br>
Amount: $${amount} | Date: ${date}<br>
Purpose: ${purpose} | Status: ${status}<br>
Payment: N/A
<button onclick="editDonation('${id}')">Edit</button>
`;
updateStats();
}
}
</script>
</body>
</html>
