root
238 lines
8.8 KiB
PHP
238 lines
8.8 KiB
PHP
<?php
|
||
// ✅ Properly include and assign the returned content array
|
||
$content = include(APPPATH . 'Views/policy/school_policy_partial.php');
|
||
|
||
$sections = $content['sections'] ?? [];
|
||
$title = $content['title'] ?? 'School Policies';
|
||
?>
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title><?= esc($title) ?></title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link rel="stylesheet" href="<?= base_url('assets/css/policy_style.css') ?>">
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<header class="header">
|
||
<div class="header-content">
|
||
<div class="logo-container">
|
||
<i class="fas fa-school logo"></i>
|
||
<div class="school-name">Al Rahma Sunday School</div>
|
||
</div>
|
||
<div class="header-info">
|
||
<i class="fas fa-calendar-alt"></i> Last updated: 09-01-2025
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Mobile Navigation Modal - Moved outside main-container -->
|
||
<nav class="policy-nav" id="policyNav">
|
||
<button class="nav-close" id="navClose">×</button>
|
||
<div class="nav-title"><i class="fas fa-list"></i> Sections</div>
|
||
|
||
<ul>
|
||
<?php
|
||
$sectionIndex = 0;
|
||
foreach ($sections as $section):
|
||
if (!empty($section['heading'])):
|
||
?>
|
||
<li><a href="#section-<?= $sectionIndex ?>" class="<?= $sectionIndex === 0 ? 'active' : '' ?>">
|
||
<i class="fas fa-chevron-right"></i> <?= esc($section['heading']) ?>
|
||
</a></li>
|
||
<?php
|
||
endif;
|
||
$sectionIndex++;
|
||
endforeach;
|
||
?>
|
||
</ul>
|
||
</nav>
|
||
|
||
<div class="main-container">
|
||
<div class="mobile-nav-toggle">
|
||
<i class="fas fa-bars"></i> Policy Sections
|
||
</div>
|
||
|
||
<!-- Desktop Navigation - Hidden on mobile -->
|
||
<nav class="policy-nav desktop-nav" id="desktopNav">
|
||
<div class="nav-title"><i class="fas fa-list"></i> Sections</div>
|
||
|
||
<ul>
|
||
<?php
|
||
$sectionIndex = 0;
|
||
foreach ($sections as $section):
|
||
if (!empty($section['heading'])):
|
||
?>
|
||
<li><a href="#section-<?= $sectionIndex ?>" class="<?= $sectionIndex === 0 ? 'active' : '' ?>">
|
||
<i class="fas fa-chevron-right"></i> <?= esc($section['heading']) ?>
|
||
</a></li>
|
||
<?php
|
||
endif;
|
||
$sectionIndex++;
|
||
endforeach;
|
||
?>
|
||
</ul>
|
||
</nav>
|
||
|
||
<div class="policy-content">
|
||
|
||
<div class="policy-header">
|
||
<h1><?= esc($title) ?></h1>
|
||
<p class="last-updated">Effective from: 09-01-2025</p>
|
||
</div>
|
||
|
||
<?php
|
||
$sectionIndex = 0;
|
||
foreach ($sections as $section):
|
||
?>
|
||
<section id="section-<?= $sectionIndex ?>" class="section">
|
||
<?php if (!empty($section['heading'])): ?>
|
||
<h2><i class="fas fa-info-circle"></i> <?= esc($section['heading']) ?></h2>
|
||
<?php endif; ?>
|
||
|
||
<?php
|
||
if (isset($section['subsections'][0])):
|
||
// Multiple subsections
|
||
foreach ($section['subsections'] as $sub):
|
||
?>
|
||
<?php if (!empty($sub['title'])): ?>
|
||
<h3><i class="fas fa-angle-right"></i> <?= esc($sub['title']) ?></h3>
|
||
<?php endif; ?>
|
||
|
||
<div class="policy-body"><?= $sub['body'] ?></div>
|
||
<?php
|
||
endforeach;
|
||
elseif (isset($section['subsections']['body'])):
|
||
// Single subsection with just body
|
||
?>
|
||
<div class="policy-body"><?= $section['subsections']['body'] ?></div>
|
||
<?php endif; ?>
|
||
</section>
|
||
<?php
|
||
$sectionIndex++;
|
||
endforeach;
|
||
?>
|
||
|
||
<div class="actions-container">
|
||
<button onclick="window.print()" class="action-btn print">
|
||
<i class="fas fa-print"></i> Print
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="footer">
|
||
<p>© 2026 Al Rahma Sunday School by ISGL. All Rights Reserved.</p>
|
||
<p>ISGL, Chelmsford MA • +1 978-364-0219 • alrahma.isgl@gmail.com</p>
|
||
</footer>
|
||
|
||
<script>
|
||
// Mobile navigation toggle
|
||
document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
|
||
const nav = document.getElementById('policyNav');
|
||
const body = document.body;
|
||
nav.classList.toggle('active');
|
||
|
||
const icon = this.querySelector('i');
|
||
if (nav.classList.contains('active')) {
|
||
icon.className = 'fas fa-times';
|
||
body.classList.add('modal-open'); // Prevent body scroll
|
||
} else {
|
||
icon.className = 'fas fa-bars';
|
||
body.classList.remove('modal-open'); // Restore body scroll
|
||
}
|
||
});
|
||
|
||
// Close button functionality
|
||
document.getElementById('navClose').addEventListener('click', function() {
|
||
const nav = document.getElementById('policyNav');
|
||
const body = document.body;
|
||
nav.classList.remove('active');
|
||
body.classList.remove('modal-open');
|
||
document.querySelector('.mobile-nav-toggle i').className = 'fas fa-bars';
|
||
});
|
||
|
||
// Close mobile nav when a link is clicked
|
||
document.querySelectorAll('#policyNav a').forEach(link => {
|
||
link.addEventListener('click', function() {
|
||
if (window.innerWidth < 992) {
|
||
const nav = document.getElementById('policyNav');
|
||
const body = document.body;
|
||
nav.classList.remove('active');
|
||
body.classList.remove('modal-open');
|
||
document.querySelector('.mobile-nav-toggle i').className = 'fas fa-bars';
|
||
}
|
||
});
|
||
});
|
||
|
||
// Close modal when clicking outside the navigation content
|
||
document.addEventListener('click', function(e) {
|
||
const nav = document.getElementById('policyNav');
|
||
const toggle = document.querySelector('.mobile-nav-toggle');
|
||
|
||
if (nav.classList.contains('active') &&
|
||
!nav.contains(e.target) &&
|
||
!toggle.contains(e.target) &&
|
||
window.innerWidth < 992) {
|
||
nav.classList.remove('active');
|
||
document.body.classList.remove('modal-open');
|
||
document.querySelector('.mobile-nav-toggle i').className = 'fas fa-bars';
|
||
}
|
||
});
|
||
|
||
// Simple script to highlight current section in navigation
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const sections = document.querySelectorAll('.section');
|
||
const mobileNavLinks = document.querySelectorAll('#policyNav a');
|
||
const desktopNavLinks = document.querySelectorAll('#desktopNav a');
|
||
|
||
function highlightNav() {
|
||
let currentSection = '';
|
||
const scrollY = window.pageYOffset + 100;
|
||
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
const sectionHeight = section.clientHeight;
|
||
const sectionId = section.getAttribute('id');
|
||
|
||
if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
|
||
currentSection = sectionId;
|
||
}
|
||
});
|
||
|
||
// Update both mobile and desktop nav links
|
||
[...mobileNavLinks, ...desktopNavLinks].forEach(link => {
|
||
link.classList.remove('active');
|
||
if (link.getAttribute('href').substring(1) === currentSection) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
window.addEventListener('scroll', highlightNav);
|
||
|
||
// Add smooth scrolling for navigation links (both mobile and desktop)
|
||
[...mobileNavLinks, ...desktopNavLinks].forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
|
||
const targetId = this.getAttribute('href');
|
||
const targetElement = document.querySelector(targetId);
|
||
|
||
window.scrollTo({
|
||
top: targetElement.offsetTop - 20,
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|