recreate project
This commit is contained in:
root
@@ -0,0 +1,237 @@
|
||||
<?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>
|
||||
Reference in New Issue
Block a user