| Current File : /home/drugfree/public_html/pledge_wall.php |
<?php include('db_conn.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pledge Wall || DRUG FREE PROJECT </title>
<!-- favicons Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
<link rel="manifest" href="assets/images/favicons/site.webmanifest">
<meta name="keywords" content="Drug Free Project, drug abuse prevention, substance abuse awareness, youth mental health, drug rehabilitation support, anti-drug campaign Nigeria, drug-free schools, recovery programs, drug addiction help, mental wellness Nigeria, drug-free Nigeria, youth empowerment, workplace drug policy, drug abuse education, community health programs, drug-free advocacy, mental health support, drug recovery Nigeria, faith-based recovery, skill acquisition for youth">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://drugfreeproject.org">
<meta property="og:title" content="Pledge Wall || DRUG FREE PROJECT">
<meta property="og:description" content="The Drug Free Project is a national movement promoting drug abuse prevention, mental wellness, recovery support, youth empowerment, and sustainable drug-free environments in schools, communities, and workplaces across Nigeria.">
<meta property="og:image" content="https://drugfreeproject.org/icon.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://drugfreeproject.org">
<meta property="twitter:title" content="Pledge Wall || DRUG FREE PROJECT">
<meta name="twitter:site" content="@drugfreeproject" />
<meta property="twitter:description" content="The Drug Free Project is a national movement promoting drug abuse prevention, mental wellness, recovery support, youth empowerment, and sustainable drug-free environments in schools, communities, and workplaces across Nigeria.">
<meta property="twitter:image" content="https://drugfreeproject.org/icon.png">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="../../css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="../../css2-1?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link href="../../css2-2?family=Caveat:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/vendors/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/vendors/animate/animate.min.css">
<link rel="stylesheet" href="assets/vendors/animate/custom-animate.css">
<link rel="stylesheet" href="assets/vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="assets/vendors/jarallax/jarallax.css">
<link rel="stylesheet" href="assets/vendors/jquery-magnific-popup/jquery.magnific-popup.css">
<link rel="stylesheet" href="assets/vendors/nouislider/nouislider.min.css">
<link rel="stylesheet" href="assets/vendors/nouislider/nouislider.pips.css">
<link rel="stylesheet" href="assets/vendors/odometer/odometer.min.css">
<link rel="stylesheet" href="assets/vendors/swiper/swiper.min.css">
<link rel="stylesheet" href="assets/vendors/oxpins-icons/style.css">
<link rel="stylesheet" href="assets/vendors/tiny-slider/tiny-slider.min.css">
<link rel="stylesheet" href="assets/vendors/reey-font/stylesheet.css">
<link rel="stylesheet" href="assets/vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="assets/vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="assets/vendors/bxslider/jquery.bxslider.css">
<link rel="stylesheet" href="assets/vendors/bootstrap-select/css/bootstrap-select.min.css">
<link rel="stylesheet" href="assets/vendors/vegas/vegas.min.css">
<link rel="stylesheet" href="assets/vendors/jquery-ui/jquery-ui.css">
<link rel="stylesheet" href="assets/vendors/timepicker/timePicker.css">
<!-- template styles -->
<link rel="stylesheet" href="assets/css/oxpins.css">
<link rel="stylesheet" href="assets/css/oxpins-responsive.css">
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
<style>
h2 {
color: #333;
}
.signature-wall {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.signature {
font-family: 'Great Vibes', cursive;
font-size: 1.8em;
color: #2a2a2a;
background: #fff;
padding: 10px 15px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
</style>
</head>
<body class="custom-cursor">
<?php include('header.php'); ?>
<div class="stricky-header stricked-menu main-menu">
<div class="sticky-header__content"></div><!-- /.sticky-header__content -->
</div><!-- /.stricky-header -->
<!--Page Header Start-->
<section class="page-header">
<div class="page-header-bg" style="background-image: url(assets/images/backgrounds/page-header-bg.jpg)">
</div>
<div class="container">
<div class="page-header__inner">
<ul class="thm-breadcrumb list-unstyled">
<li><a href="index.php">Home</a></li>
<li><span>/</span></li>
<li class="active">Pledge Wall</li>
</ul>
<h2>Pledge Wall</h2>
</div>
</div>
</section>
<!--Page Header End-->
<!--Events Page Start-->
<section class="events-page">
<div class="container">
<div class="row">
<h2 class="section-title__title">🌟 Drug-Free Pledge Wall</h2><br>
<span class="section-title__tagline">These brave individuals have pledged to live a drug-free life: </span>
<div class="signature-wall mt-4">
<?php
$file = 'pledge/signatures.txt';
$signatures = file_exists($file) ? file($file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) : [];
// Show newest signatures first
$signatures = array_reverse($signatures);
// Pagination config
$per_page = 50; // change this if you want more/less per page
$total = count($signatures);
$total_pages = $total > 0 ? ceil($total / $per_page) : 1;
// Get current page
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$page = max(1, min($page, $total_pages));
// Slice array for current page
$start = ($page - 1) * $per_page;
$current_signatures = array_slice($signatures, $start, $per_page);
// Display signatures
if ($total > 0) {
echo "<div class='row g-3'>";
foreach ($current_signatures as $signed) {
echo "<div class='col-md-6 col-lg-4'>
<div class='signature p-3 border rounded bg-light h-100'>
✍️ " . htmlspecialchars($signed) . "
</div>
</div>";
}
echo "</div>";
} else {
echo "<div class='alert alert-info'>No signatures yet. Be the first to pledge!</div>";
}
// Bootstrap 5 Pagination
if ($total_pages > 1) {
echo "<nav class='mt-5'>";
echo "<ul class='pagination justify-content-center flex-wrap'>";
// Previous button
$prev_disabled = $page <= 1 ? 'disabled' : '';
echo "<li class='page-item $prev_disabled'>
<a class='page-link' href='?page=" . ($page - 1) . "'>« Prev</a>
</li>";
// Page numbers - show 2 before/after current
$start_page = max(1, $page - 2);
$end_page = min($total_pages, $page + 2);
// First page
if ($start_page > 1) {
echo "<li class='page-item'><a class='page-link' href='?page=1'>1</a></li>";
if ($start_page > 2) {
echo "<li class='page-item disabled'><span class='page-link'>...</span></li>";
}
}
// Middle pages
for ($i = $start_page; $i <= $end_page; $i++) {
$active = $i == $page ? 'active' : '';
echo "<li class='page-item $active'><a class='page-link' href='?page=$i'>$i</a></li>";
}
// Last page
if ($end_page < $total_pages) {
if ($end_page < $total_pages - 1) {
echo "<li class='page-item disabled'><span class='page-link'>...</span></li>";
}
echo "<li class='page-item'><a class='page-link' href='?page=$total_pages'>$total_pages</a></li>";
}
// Next button
$next_disabled = $page >= $total_pages ? 'disabled' : '';
echo "<li class='page-item $next_disabled'>
<a class='page-link' href='?page=" . ($page + 1) . "'>Next »</a>
</li>";
echo "</ul>";
echo "<p class='text-center text-muted mt-2'>
Page $page of $total_pages | Showing " . ($start + 1) . "-" . min($start + $per_page, $total) . " of $total pledges
</p>";
echo "</nav>";
}
?>
</div>
</div>
</div>
</section>
<!--Events Page End-->
<!--Site Footer Start-->
<?php include('footer.php'); ?>
<!--Site Footer End-->
<script src="assets/vendors/jquery/jquery-3.6.0.min.js"></script>
<script src="assets/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendors/jarallax/jarallax.min.js"></script>
<script src="assets/vendors/jquery-ajaxchimp/jquery.ajaxchimp.min.js"></script>
<script src="assets/vendors/jquery-appear/jquery.appear.min.js"></script>
<script src="assets/vendors/jquery-circle-progress/jquery.circle-progress.min.js"></script>
<script src="assets/vendors/jquery-magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="assets/vendors/jquery-validate/jquery.validate.min.js"></script>
<script src="assets/vendors/nouislider/nouislider.min.js"></script>
<script src="assets/vendors/odometer/odometer.min.js"></script>
<script src="assets/vendors/swiper/swiper.min.js"></script>
<script src="assets/vendors/tiny-slider/tiny-slider.min.js"></script>
<script src="assets/vendors/wnumb/wNumb.min.js"></script>
<script src="assets/vendors/wow/wow.js"></script>
<script src="assets/vendors/isotope/isotope.js"></script>
<script src="assets/vendors/countdown/countdown.min.js"></script>
<script src="assets/vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="assets/vendors/bxslider/jquery.bxslider.min.js"></script>
<script src="assets/vendors/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="assets/vendors/vegas/vegas.min.js"></script>
<script src="assets/vendors/jquery-ui/jquery-ui.js"></script>
<script src="assets/vendors/timepicker/timePicker.js"></script>
<script src="assets/vendors/circleType/jquery.circleType.js"></script>
<script src="assets/vendors/circleType/jquery.lettering.min.js"></script>
<!-- template js -->
<script src="assets/js/oxpins.js"></script>
</body>
</html>