Code restructure push

This commit is contained in:
twotalesanimation
2025-12-04 15:09:44 +02:00
parent 86faad7a78
commit be2b757f4e
111 changed files with 17297 additions and 19420 deletions
+46
View File
@@ -0,0 +1,46 @@
<?php
$headerStyle = 'light';
include_once(dirname(dirname(dirname(__DIR__))) . '/header.php');
?>
<!-- 404 Error Area start -->
<section class="error-area pt-70 pb-100 rel z-1">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-xl-5 col-lg-6">
<div class="error-content rmb-55" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
<h1>OOPS! </h1>
<div class="section-title mt-15 mb-25">
<h2>This Page Cant be Found</h2>
</div>
<!-- <p>Best features to include on business landing page are those that quickly convey your value proposition, build trust, and encourage action. Here are six essential features</p> -->
<!-- <form class="newsletter-form mt-40 mb-50" action="#">
<input id="news-email" type="text" placeholder="Search keyword" required>
<button type="submit" class="theme-btn bgc-secondary style-two">
<span data-hover="Search">Search</span>
<i class="fal fa-arrow-right"></i>
</button>
</form>
<div class="keywords">
<a href="blog.html">Travel</a>
<a href="blog.html">Luxury Hotel</a>
<a href="blog.html">Indonesia</a>
<a href="blog.html">Sea Beach</a>
<a href="blog.html">Camping</a>
<a href="blog.html">Hiking</a>
<a href="blog.html">Fishing</a>
</div> -->
</div>
</div>
<div class="col-xl-5 col-lg-6">
<div class="error-images" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
<img src="assets/images/404/lost.jpg" alt="404 Error">
</div>
</div>
</div>
</div>
</section>
<!-- 404 Error Area end -->
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
+284
View File
@@ -0,0 +1,284 @@
<?php
$headerStyle = 'light';
// Determine the correct path to header.php based on file location
$rootPath = dirname(dirname(dirname(__DIR__)));
include_once($rootPath . '/header.php');
?>
<style>
.gallery-slider-active {
display: flex;
flex-wrap: wrap;
gap: 16px;
/* spacing between images */
justify-content: center;
}
.gallery-three-item {
width: 520px;
height: 300px;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background: #f9f9f9;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.gallery-three-item .image {
flex-grow: 1;
width: 100%;
height: 100%;
}
.gallery-three-item img {
width: 100%;
height: 100%;
object-fit: cover;
/* ensures aspect ratio while filling container */
display: block;
}
</style>
<?php
$pageTitle = 'About';
$breadcrumbs = [['Home' => 'index.php']];
require_once($rootPath . '/components/banner.php');
?>
<!-- Benefit Area start -->
<section class="benefit-area mt-100 rel z-1">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-xl-5 col-lg-6">
<div class="mobile-app-content rmb-55" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<div class="section-title counter-text-wrap mb-40">
<h2>Welcome to the Four Wheel Drive Club of Southern Africa!</h2>
</div>
<p style="max-width: 600px; margin: 0 auto;">
We're a family-friendly outdoor adventure club passionate about exploring the great outdoors through off-road driving, camping, overlanding, cross-border trips, day trips, and unforgettable events. Whether you're new to 4x4 adventures or a seasoned explorer, our community is all about camaraderie, responsible adventure, and creating lasting memories—on and off the road.
</p>
<ul class="list-style-two mt-35 mb-30">
<li>Overlanding</li>
<li>Camping</li>
<li>Day Trips</li>
<li>4x4 Driver Training</li>
<li>Family Events</li>
<li>Monthly Open Days</li>
<li>Guest Speakers</li>
<li>4x4 Driving Track</li>
</ul>
<!-- <a href="about.html" class="theme-btn style-two">
<span data-hover="Explore Guides">Explore Guides</span>
<i class="fal fa-arrow-right"></i>
</a> -->
</div>
</div>
<div class="col-lg-6">
<div class="benefit-image-part style-two">
<div class="image-one" data-aos="fade-down" data-aos-delay="50" data-aos-duration="1500" data-aos-offset="50">
<img src="assets/images/benefit/benefit1.png" alt="Benefit">
</div>
<div class="image-two" data-aos="fade-up" data-aos-delay="50" data-aos-duration="1500" data-aos-offset="50">
<img src="assets/images/benefit/benefit2.png" alt="Benefit">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Benefit Area end -->
<!-- Hotel Area start -->
<section class="hotel-area bgc-black py-100 rel z-1">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title text-white text-center counter-text-wrap mb-70" data-aos="fade-up"
data-aos-duration="1500" data-aos-offset="50">
<h2>BASE4 Open Days</h2>
<p style="max-width: 60%; margin: auto;">Whether you're a member or just curious, everyone's welcome at our monthly open events. Come camp with us, enjoy guest speakers, take your rig for a spin on the 4x4 track, or just relax by the swimming pool. Saturdays Open Day includes breakfast and lunch for sale, plus braai fires ready to go—just bring your tongs! Its the perfect way to experience the spirit of the club and connect with fellow adventurers. </p>
</div>
</div>
</div>
<div class="gallery-slider-active">
<?php
$folder = $rootPath . '/assets/images/opendays/';
$images = glob($folder . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
// Convert absolute paths to web-relative paths
$images = array_map(function($path) use ($rootPath) {
return str_replace($rootPath, '', $path);
}, $images);
// Shuffle and pick first 5
shuffle($images);
$selected = array_slice($images, 0, 10);
foreach ($selected as $image) {
echo '<div class="gallery-three-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<div class="image">
<img src="' . $image . '" alt="Gallery">
</div>
</div>';
}
?>
</div>
</div>
<!-- <div class="hotel-more-btn text-center mt-40">
<a href="destination2.html" class="theme-btn style-four">
<span data-hover="Explore More Hotel">Explore More Hotel</span>
<i class="fal fa-arrow-right"></i>
</a>
</div> -->
</div>
</section>
<!-- Hotel Area end -->
<!-- Features Area start -->
<section class="features-area pt-100 pb-45 rel z-1">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-6">
<div class="features-content-part mb-55" data-aos="fade-left" data-aos-duration="1500"
data-aos-offset="50">
<div class="section-title mb-20">
<h2>Want to get involved?<b>JOIN THE COMMITTEE!</b></h2>
<p>Want to be more involved in the adventure? Join our committee and help shape the future of the club! Whether its planning epic trips, organizing fun events, or assisting with training, your energy and ideas make all the difference. The club runs on the passion of its members—get stuck in, meet awesome people, and be part of what makes it all happen!</p>
<div class="image">
<img style="border-radius:10px;" src="assets/images/memories/40.jpg" alt="Hotel">
</div>
</div>
</div>
</div>
<div class="col-xl-6" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
<div class="row pb-25">
<div class="section-title text-center counter-text-wrap mb-70" data-aos="fade-up"
data-aos-duration="1500" data-aos-offset="50">
<h2>4WDCSA Committee and Other Office Bearers</h2>
<div>
<h3>Committee</h3>
<li>Chairman - John Runciman</li>
<li>National Liaison - Peter Hutchison</li>
<li>Treasurer - Doug Timm</li>
<li>Outings - John Runciman</li>
<li>Events - Noelene Runciman</li>
<li>Driver Training - John Runciman</li>
<li>Digital Media - Christopher Pinto</li>
</div>
<div class="pt-30 pb-20">
<h3>Administration</h3>
<li>Secretary - Jacqui Boshoff</li>
</div>
<p style="font-size:0.8rem;">
All portfolio holders/committee members of the 4WDCSA are volunteers and are not paid for their services.<br>The secretary is paid for administrative duties only.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Area end -->
<!-- Hotel Area start -->
<section class="hotel-area bgc-black py-100 rel z-1">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title text-white text-center counter-text-wrap mb-70" data-aos="fade-up"
data-aos-duration="1500" data-aos-offset="50">
<h2>4x4 Memories</h2>
</div>
</div>
</div>
<div class="gallery-slider-active"><?php
$folder = $rootPath . '/assets/images/memories/';
$images = glob($folder . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
// Convert absolute paths to web-relative paths
$images = array_map(function($path) use ($rootPath) {
return str_replace($rootPath, '', $path);
}, $images);
// Shuffle and pick first 5
shuffle($images);
$selected = array_slice($images, 0, 20);
foreach ($selected as $image) {
echo '<div class="gallery-three-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<div class="image">
<img src="' . $image . '" alt="Gallery">
</div>
</div>';
}
?>
</div>
</div>
<!-- <div class="hotel-more-btn text-center mt-40">
<a href="destination2.html" class="theme-btn style-four">
<span data-hover="Explore More Hotel">Explore More Hotel</span>
<i class="fal fa-arrow-right"></i>
</a>
</div> -->
</div>
</section>
<!-- Hotel Area end -->
<!-- CTA Area start -->
<section class="cta-area pt-100 rel z-1">
<div class="container-fluid">
<div class="row">
<div class="col-xl-4 col-md-6" data-aos="zoom-in-down" data-aos-duration="1500" data-aos-offset="50">
<div class="cta-item" style="background-image: url(assets/images/trips/1_01.jpg);">
<span class="category">Extended Trips</span>
<h2>Come and Explore Africa and beyond</h2>
<a href="<?= url('trips') ?>" class="theme-btn style-two bgc-secondary">
<span data-hover="Explore Tours">Explore Trips</span>
<i class="fal fa-arrow-right"></i>
</a>
</div>
</div>
<div class="col-xl-4 col-md-6" data-aos="zoom-in-down" data-aos-delay="50" data-aos-duration="1500" data-aos-offset="50">
<div class="cta-item" style="background-image: url(assets/images/courses/driver_training.png);">
<span class="category">Driver Training</span>
<h2>Level up your 4x4 Driving Skills</h2>
<a href="<?= url('driver_training') ?>" class="theme-btn style-two">
<span data-hover="Explore Tours">Explore Training</span>
<i class="fal fa-arrow-right"></i>
</a>
</div>
</div>
<div class="col-xl-4 col-md-6" data-aos="zoom-in-down" data-aos-delay="100" data-aos-duration="1500" data-aos-offset="50">
<div class="cta-item" style="background-image: url(assets/images/base4/camping.jpg);">
<span class="category">Events</span>
<h2>See whats cooking at BASE4!</h2>
<a href="<?= url('events') ?>" class="theme-btn style-two bgc-secondary">
<span data-hover="Explore Tours">Explore Events</span>
<i class="fal fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Area end -->
<!-- Blog Area start -->
<section class="blog-area pt-70 rel z-1">
<div class="container">
<div class="row justify-content-center">
</div>
</div>
</section>
<!-- Blog Area end -->
<?php include_once($rootPath . '/components/insta_footer.php'); ?>
+249
View File
@@ -0,0 +1,249 @@
<?php
$headerStyle = 'light';
include_once(dirname(dirname(dirname(__DIR__))) . '/header.php');
// Assuming you have the user ID stored in the session
$user_id = $_SESSION['user_id'];
// Fetch user data from the database
$sql = "SELECT * FROM users WHERE user_id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $user_id);
$stmt->execute();
$result = $stmt->get_result();
$user = $result->fetch_assoc();
?>
<style>
.profile-picture:hover .edit-icon {
display: block;
}
.profile-picture {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto;
}
.profile-pic-display {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.edit-icon {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 50%;
cursor: pointer;
}
.edit-icon i {
color: white;
}
</style>
<!-- Account Settings Area start -->
<section class="account-settings-area py-70 rel z-1">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<div class="comment-form bgc-lighter z-1 rel mb-30 rmb-55">
<form id="accountForm" name="accountForm" method="post" action="update_user">
<div class="section-title py-20">
<h2>Account Settings</h2>
<div id="responseMessage"></div> <!-- Message display area -->
</div>
<!-- Display Profile Picture -->
<div class="profile-picture" style="position: relative; width: 150px; height: 150px; margin: 0 auto;">
<img id="profile-pic" src="<?php echo $user['profile_pic']; ?>?v=<?php echo time(); ?>" alt="Profile Picture" class="profile-pic-display"
style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;">
<button type="button" id="uploadPictureBtn" class="edit-icon">
<i class="fas fa-pencil-alt"></i>
</button>
<input type="file" id="profile_picture" name="profile_picture" accept="image/*" style="display:none;">
</div>
<!-- Form Fields -->
<div class="row mt-35">
<div class="col-md-6">
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" id="first_name" name="first_name" class="form-control" value="<?php echo $user['first_name']; ?>" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="last_name">Last Name</label>
<input type="text" id="last_name" name="last_name" class="form-control" value="<?php echo $user['last_name']; ?>" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="phone_number">Phone Number</label>
<input type="text" id="phone_number" name="phone_number" class="form-control" value="<?php echo $user['phone_number']; ?>" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" class="form-control" value="<?php echo $user['email']; ?>" required>
</div>
</div>
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
<div class="col-md-12">
<div class="form-group mb-0">
<button type="submit" class="theme-btn style-two" style="width:100%;">Update Info</button>
</div>
</div>
</div>
</form>
<?php if (getUserType($user_id) !== 'google'){?>
<!-- Change Password Form -->
<form id="changePasswordForm" name="changePasswordForm" action="change_password" method="post">
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
<div class="col-md-12 mt-20">
<h4>Change Password</h4>
<div id="responseMessage2"></div> <!-- Message display area -->
<div class="form-group">
<label for="current_password">Current Password</label>
<input type="password" id="current_password" name="current_password" class="form-control" required>
</div>
<div class="form-group">
<label for="new_password">New Password</label>
<input type="password" id="new_password" name="new_password" class="form-control" required>
</div>
<div class="form-group">
<label for="confirm_password">Confirm New Password</label>
<input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
</div>
<div class="form-group mb-0">
<button type="submit" class="theme-btn style-two" style="width:100%;">Change Password</button>
</div>
</div>
</form>
<?php }?>
</div>
</div>
</div>
</div>
</section>
<!-- Account Settings Area end -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Clear the responseMessage when the user changes any form input
$('#accountForm input, #changePasswordForm input').on('input', function() {
$('#responseMessage').html(''); // Clear the message
$('#responseMessage2').html(''); // Clear the message
});
// Profile Picture Upload
$('#uploadPictureBtn').click(function() {
$('#profile_picture').click();
});
$('#profile_picture').on('change', function() {
var formData = new FormData();
formData.append('profile_picture', $('#profile_picture')[0].files[0]);
$.ajax({
url: 'upload_profile_picture',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
// Parse response if needed
if (typeof response === "string") {
response = JSON.parse(response);
}
if (response.status === 'success') {
// Update the profile picture source with cache-busting query string
// Reload the current page
window.location.reload();
$('#responseMessage').html('<div class="alert alert-success">' + response.message + '</div>');
} else {
$('#responseMessage').html('<div class="alert alert-danger">' + response.message + '</div>');
}
},
error: function() {
$('#responseMessage').html('<div class="alert alert-danger">Error uploading profile picture.</div>');
}
});
});
// Account Info Update
$('#accountForm').on('submit', function(event) {
event.preventDefault(); // Prevent default form submission
$.ajax({
url: 'update_user',
type: 'POST',
data: $(this).serialize(),
success: function(response) {
// Parse response if needed
if (typeof response === "string") {
response = JSON.parse(response);
}
if (response.status === 'success') {
$('#responseMessage').html('<div class="alert alert-success">' + response.message + '</div>');
} else {
$('#responseMessage').html('<div class="alert alert-danger">' + response.message + '</div>');
}
},
error: function() {
$('#responseMessage').html('<div class="alert alert-danger">Error updating information.</div>');
}
});
});
// Change Password
$('#changePasswordForm').on('submit', function(event) {
event.preventDefault(); // Prevent default form submission
$.ajax({
url: 'change_password',
type: 'POST',
data: $(this).serialize(),
success: function(response) {
// Parse response if needed
if (typeof response === "string") {
response = JSON.parse(response);
}
if (response.status === 'success') {
$('#responseMessage2').html('<div class="alert alert-success">' + response.message + '</div>');
} else {
$('#responseMessage2').html('<div class="alert alert-danger">' + response.message + '</div>');
}
},
error: function() {
$('#responseMessage2').html('<div class="alert alert-danger">Error changing password.</div>');
}
});
});
});
</script>
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
+29
View File
@@ -0,0 +1,29 @@
<div style="padding-left:15px; padding-right:15px;" id="advertisingCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
<div style="border-radius:20px;" class="carousel-inner">
<?php
$dir = 'assets/images/advertising/';
$images = glob($dir . '*.{jpg,jpeg,png,gif,webp}', GLOB_BRACE);
foreach ($images as $index => $img) {
$active = $index === 0 ? 'active' : '';
echo "<div class='carousel-item $active'>
<img src='$img' class='d-block w-100' style='height:394px; object-fit:cover;' alt='Ad $index'>
</div>";
}
?>
<a class="carousel-control-prev" href="#advertisingCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#advertisingCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
<div class="carousel-indicators">
<?php foreach ($images as $i => $_): ?>
<button type="button" data-bs-target="#advertisingCarousel" data-bs-slide-to="<?= $i ?>" class="<?= $i === 0 ? 'active' : '' ?>" aria-current="<?= $i === 0 ? 'true' : 'false' ?>" aria-label="Slide <?= $i + 1 ?>"></button>
<?php endforeach; ?>
</div>
</div>
</div>
+133
View File
@@ -0,0 +1,133 @@
<?php
$headerStyle = 'light';
$rootPath = dirname(dirname(dirname(__DIR__)));
include_once($rootPath . '/header.php');
// Assuming you have the user ID stored in the session
if (isset($_SESSION['user_id'])) {
$user_id = $_SESSION['user_id'];
} else {
header('Location: login.php');
exit(); // Stop further script execution
}
?>
<style>
h2 {
text-align: center;
margin-bottom: 20px;
}
.indemnitycontainer {
max-width: 800px;
margin: 0 auto;
}
.indemnity-text {
text-align: justify;
margin-bottom: 20px;
}
.signature-container {
margin-top: 30px;
margin-bottom: 100px;
text-align: center;
}
#signature-pad {
border: 1px solid black;
}
</style>
<?php
$pageTitle = 'Indemnity';
$breadcrumbs = [['Home' => 'index.php']];
require_once($rootPath . '/components/banner.php');
?>
<!-- Page Banner End -->
<div class="indemnitycontainer pt-20">
<!-- <h2>Indemnity and Waiver</h2> -->
<div class="indemnity-text">
<p><strong>INDEMNITY AND WAIVER</strong></p>
<p>1. I agree to abide by the Code of Conduct as listed below, as well as any reasonable instructions given by any Member of the Committee of the Club, or any person appointed by the Club to organise or control any event (Club Officer).</p>
<p>2. I acknowledge that driving the off-road track is inherently dangerous, and that I am fully aware of the dangers thereof. I warrant that I will make all members of my party aware of such dangers prior to driving the track.</p>
<p>3. While I, or any member of my party, enjoy the facilities at Base 4 including overnight camping, picnicking, driving the track, using the swimming pool facility or activity or any other activity while at Base 4, I agree that under no circumstances shall the Club be liable for any loss or damage of any kind whatsoever (including consequential loss) which I or any of my party may suffer, regardless of how such loss or damage may have been caused or sustained, and whether or not as a result of the negligence or breach of contract (whether fundamental or otherwise) or other wrongful act of the Club, or any Club Officer, or any of the Clubs agents or contractors, and I hereby indemnify and hold harmless the Club and any Club Officer against all such loss or damage.</p>
<p>4. The expression, member of my party, means all persons who accompany me or attending any event at my specific invitation, request or suggestion, and includes without limitation, members of family, guests and invitees.</p>
<p>5. I understand that I am responsible for ensuring my vehicle and equipment and that all members of my party have adequate health and medical insurance to cover any and all likely occurrences.</p>
<p>6. This indemnity is irrevocable and shall apply to me and the members of my party for any Club events in which I may participate or attend.</p>
<p><strong>BASE 4 CODE OF CONDUCT</strong></p>
<p>1. No motorbikes or quadbikes.</p>
<p>2. No loud music (unless authorised by the Committee or its representatives).</p>
<p>3. Dogs to be controlled by their owners who take full responsibility for the animals behaviour.</p>
<p>4. No dogs belonging to non-members are allowed at Base 4 unless with the express permission of the Committee.</p>
<p>5. No person in the rear of open vehicles when driving on obstacles.</p>
<p>6. When driving the obstacles stay on the tracks.</p>
<p>7. Engage 4WD when driving the obstacles to minimise wear and damage to the track.</p>
<p>8. No alcohol to be consumed while driving the track.</p>
<p>9. No littering (please pick up cigarette butts etc.)</p>
<p>10. All rubbish is to be taken away with you when leaving. Dustbins and refuse collection is not provided.</p>
<p>11. Use water sparingly. Please bring your own water and a little extra for the Club.</p>
<p>I am a member of the Four Wheel Drive Club of Southern Africa and I will strive to uphold these Codes.</p>
</div>
<div class="signature-container">
<div style="text-align: center;" id="responseMessage"></div> <!-- Message display area -->
<p><strong>Signature</strong></p>
<canvas id="signature-pad" width=400 height=200></canvas><br>
<button type="button" class="theme-btn style-two" id="save">ACCEPT INDEMNITY</button>
<!-- <div class="pt-20" style="text-align: center;">You will be redirected to Payfast for payment.</div> -->
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
var canvas = document.getElementById('signature-pad');
var signaturePad = new SignaturePad(canvas);
document.getElementById('save').addEventListener('click', function() {
if (signaturePad.isEmpty()) {
alert("Please provide a signature.");
} else {
var dataUrl = signaturePad.toDataURL(); // Get signature as base64 image
$.ajax({
url: 'process_signature',
type: 'POST',
data: {
signature: dataUrl // Send the base64 signature image
},
success: function(response) {
// Parse response if needed
if (typeof response === "string") {
response = JSON.parse(response);
}
if (response.status === 'success') {
// Check if the user has paid
if (response.paymentStatus === 'PAID') {
// Redirect to membership_details.php if paid
setTimeout(function() {
window.location.href = 'membership_details.php';
}, 2000); // 2-second delay before redirecting
} else {
// Redirect to membership_payment.php if not paid
setTimeout(function() {
window.location.href = 'membership_payment.php';
}, 2000); // 2-second delay before redirecting
}
} else {
$('#responseMessage').html('<div class="alert alert-danger">' + response.message + '</div>');
}
},
error: function() {
$('#responseMessage').html('<div class="alert alert-danger">Error uploading profile picture.</div>');
}
});
}
});
</script>
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php') ?>
+385
View File
@@ -0,0 +1,385 @@
<?php
$headerStyle = 'light';
$rootPath = dirname(dirname(dirname(__DIR__)));
include_once($rootPath . '/header.php');
checkUserSession();
// SQL query to fetch dates for bush mechanics
$stmt = $conn->prepare("SELECT course_id, date FROM courses WHERE course_type = ? AND date >= CURDATE()");
$course_type = 'bush_mechanics';
$stmt->bind_param("s", $course_type);
$stmt->execute();
$result = $stmt->get_result();
$page_id = 'bush_mechanics';
?>
<style>
.form-group {
margin-bottom: 15px;
}
select {
width: 100%;
padding: 8px;
font-size: 16px;
}
</style><?php
$pageTitle = 'Bush Mechanics';
$breadcrumbs = [['Home' => 'index.php']];
require_once($rootPath . '/components/banner.php');
?>
<!-- Product Details Start -->
<section class="product-details pt-100">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="product-details-images rmb-55" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
<div class="tab-content preview-images">
<div class="tab-pane fade preview-item active show" id="preview1">
<img src="assets/images/drivertraining/bm01.jpg" alt="Perview">
</div>
<div class="tab-pane fade preview-item" id="preview2">
<img src="assets/images/drivertraining/bm02.jpg" alt="Perview">
</div>
<div class="tab-pane fade preview-item" id="preview3">
<img src="assets/images/drivertraining/bm03.jpg" alt="Perview">
</div>
</div>
<div class="nav thumb-images rmb-20">
<a href="#preview1" data-bs-toggle="tab" class="thumb-item active show">
<img src="assets/images/drivertraining/bm01.jpg" alt="Thumb">
</a>
<a href="#preview2" data-bs-toggle="tab" class="thumb-item">
<img src="assets/images/drivertraining/bm02.jpg" alt="Thumb">
</a>
<a href="#preview3" data-bs-toggle="tab" class="thumb-item">
<img src="assets/images/drivertraining/bm03.jpg" alt="Thumb">
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="product-details-content" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
<div class="section-title">
<h2>Bush Mechanics</h2>
</div>
<!-- <div class="ratting mb-15">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>(5.8k+ reviews)</span>
</div> -->
<span class="price mb-5">R <?= getPrice('bush_mechanics', 'member');?>/member</span>
<span class="price mb-25">R <?= getPrice('bush_mechanics', 'nonmember');?>/non-members</span>
<p> This Bush Mechanics Course is tailored to help you develop the essential skills for managing vehicle repairs and maintenance in remote, off-grid locations. Learn practical techniques for diagnosing and fixing mechanical issues using limited resources, from tire repairs to engine troubleshooting. The course covers the use of basic tools, improvising solutions in the field, and ensuring your vehicle remains operational even in the most challenging environments. Perfect for off-road adventurers, 4x4 owners, and those who want to be prepared for any mechanical situation while exploring remote areas.</p>
<hr class="mt-40">
<div class="blog-sidebar tour-sidebar">
<div class="widget widget-booking" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<form action="process_course_booking" method="POST">
<ul class="tickets clearfix">
<li>
Select Date
<select name="course_id" id="course_id" required>
<?php
if ($result->num_rows > 0) {
// Output each course as an option
while ($row = $result->fetch_assoc()) {
$course_id = htmlspecialchars($row['course_id']); // Escape output for security
$date = htmlspecialchars($row['date']); // Escape output for security
echo "<option value='$course_id'>$date</option>";
}
} else {
echo "<option value='' disabled>No dates available</option>";
}
?>
</select>
</li>
<?php
if ($is_member || $pending_member) {
echo '
<li>
Additional Members <span class="price"></span>
<select name="members" id="members">
<option value="0" selected>00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
</select>
</li>
';
} ?>
<li>
Additional Non-Members <span class="price"></span>
<select name="non-members" id="non-members">
<option value="0" selected>00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
</select>
</li>
</ul>
<hr class="mb-25">
<h6>Total: <span id="booking_total" class="price">-</span></h6>
<div style="margin: 20px 0;">
<div id="indemnityBox" style="border: 1px solid #ccc; padding: 10px; height: 150px; overflow-y: scroll; background: #f9f9f9; font-size: 12px;">
<p><strong>INDEMNITY AND WAIVER</strong></p>
<p>1. I agree to abide by the Code of Conduct as listed below, as well as any reasonable instructions given by any Member of the Committee of the Club, or any person appointed by the Club to organise or control any event (Club Officer).</p>
<p>2. I acknowledge that driving the off-road track is inherently dangerous, and that I am fully aware of the dangers thereof. I warrant that I will make all members of my party aware of such dangers prior to driving the track.</p>
<p>3. While I, or any member of my party, enjoy the facilities at Base 4 including overnight camping, picnicking, driving the track, using the swimming pool facility or activity or any other activity while at Base 4, I agree that under no circumstances shall the Club be liable for any loss or damage of any kind whatsoever (including consequential loss) which I or any of my party may suffer, regardless of how such loss or damage may have been caused or sustained, and whether or not as a result of the negligence or breach of contract (whether fundamental or otherwise) or other wrongful act of the Club, or any Club Officer, or any of the Clubs agents or contractors, and I hereby indemnify and hold harmless the Club and any Club Officer against all such loss or damage.</p>
<p>4. The expression, member of my party, means all persons who accompany me or attending any event at my specific invitation, request or suggestion, and includes without limitation, members of family, guests and invitees.</p>
<p>5. I understand that I am responsible for ensuring my vehicle and equipment and that all members of my party have adequate health and medical insurance to cover any and all likely occurrences.</p>
<p>6. This indemnity is irrevocable and shall apply to me and the members of my party for any Club events in which I may participate or attend.</p>
<p><strong>BASE 4 CODE OF CONDUCT</strong></p>
<p>1. No motorbikes or quadbikes.</p>
<p>2. No loud music (unless authorised by the Committee or its representatives).</p>
<p>3. Dogs to be controlled by their owners who take full responsibility for the animals behaviour.</p>
<p>4. No dogs belonging to non-members are allowed at Base 4 unless with the express permission of the Committee.</p>
<p>5. No person in the rear of open vehicles when driving on obstacles.</p>
<p>6. When driving the obstacles stay on the tracks.</p>
<p>7. Engage 4WD when driving the obstacles to minimise wear and damage to the track.</p>
<p>8. No alcohol to be consumed while driving the track.</p>
<p>9. No littering (please pick up cigarette butts etc.)</p>
<p>10. All rubbish is to be taken away with you when leaving. Dustbins and refuse collection is not provided.</p>
<p>11. Use water sparingly. Please bring your own water and a little extra for the Club.</p>
<p>I am a member of the Four Wheel Drive Club of Southern Africa and I will strive to uphold these Codes.</p>
</div>
<div style="margin-top: 10px;">
<input type="checkbox" id="agreeCheckbox" name="agree" disabled required>
<label for="agreeCheckbox" id="agreeLabel" style="color: #888;">I have read and agree to the indemnity terms</label>
</div>
</div>
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
<?php
$button_text = "Book Now";
$button_disabled = "";
if (!$result || $result->num_rows == 0) {
$button_text = "No booking dates available";
$button_disabled = "disabled";
}
?>
<button type="submit" class="theme-btn style-two w-100 mt-15 mb-5" <?php echo $button_disabled; ?>>
<span data-hover="<?php echo $button_text; ?>"><?php echo $button_text; ?></span>
<i class="fal fa-arrow-right"></i>
</button>
<div class="text-center">
<a href="contact">Need some help?</a>
</div>
</form>
</div>
</div>
<!-- <hr class="mb-45"> -->
<!-- <a href="#" class="wishlist"><i class="far fa-heart"></i> Add to Wishlist</a> -->
</div>
</div>
</div>
<ul class="nav nav product-tab mt-70 mb-30" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<li><a href="#details" data-bs-toggle="tab" class="active show">Course Overview<i class="far fa-arrow-right"></i></a></li>
<li><a href="#information" data-bs-toggle="tab">What to Expect<i class="far fa-arrow-right"></i></a></li>
<li><a href="#reviews" data-bs-toggle="tab"> Reviews <i class="far fa-arrow-right"></i></a></li>
</ul>
<div class="tab-content" data-aos="fade-up" data-aos-delay="50" data-aos-duration="1500" data-aos-offset="50">
<div class="tab-pane fade active show" id="details">
<p>This Bush Mechanics Course is designed to provide participants with practical, hands-on skills and knowledge for conducting essential repairs and maintenance in remote and off-road environments. Participants will learn how to assess mechanical issues and apply bush-friendly repair techniques, ensuring they can keep their 4x4 running smoothly in the field. The course covers a wide range of topics, from tire repairs and fixing fuel systems to electrical troubleshooting and engine repairs, all using minimal tools and available resources.</p>
<p>Emphasis is placed on the use of basic tools, improvising with available materials, and maintaining the vehicles functionality in harsh conditions. The course also prioritizes safety, teaching participants how to perform repairs while minimizing risk and ensuring they can safely handle mechanical breakdowns during off-road adventures. With a focus on resourcefulness and problem-solving, this course equips off-road enthusiasts and 4x4 owners with the confidence to tackle mechanical challenges and keep their vehicles in top shape while exploring remote locations.</p>
<div class="row gap-50 pt-25 pb-20 align-items-center">
<div class="col-lg-7 pt-15">
<h5>What this course includes</h5>
<ul class="list-style-two mt-25">
<li>Bush Mechanics Manual.</li>
<li>Theory session and discussion.</li>
<li>Spend the afternoon practicing common bush mechanics techniques.</li>
</ul>
</div>
<div class="col-lg-5">
<div class="image rmt-45">
<img src="assets/images/drivertraining/bm04.jpg" alt="Product Details">
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="information">
<!-- <p>Circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses</p> -->
<ul class="list-style-two my-35">
<li>Coffee and Welcome: Kick off the day with a warm coffee, meet your instructors, and receive an overview of the course schedule</li>
<li>Theory Session: Dive into the key principles of off-road driving, including vehicle mechanics, terrain navigation, recovery methods, and safety protocols.</li>
<li>Practical Demonstrations: Watch live demonstrations covering vital techniques like gear selection, adjusting tire pressure, and setting up recovery equipment.</li>
<li>Lunch Break: Enjoy a packed lunch or bring something to braai. Fires will be provided for an authentic outdoor experience.</li>
<li>Practical Bush Mechanics Techniques: Learn hands-on techniques like rebeading a tire, fixing punctures, and performing basic vehicle repairs in the field.</li>
<li>Debrief and Certificates: Conclude the day with a review of your progress, feedback from the instructors, and certificates of completion for your off-road training.</li>
</ul>
</div>
<div class="tab-pane fade mb-20" id="reviews">
<?php include_once('review_box.php'); ?>
</div>
</div>
</div>
</section>
<!-- Product Details End -->
<!-- Shop Details Area start -->
<!-- <section class="shop-details-page pt-80 pb-100 rel z-1">
<div class="container">
<div class="section-title text-center mb-40">
<h2>Other Courses</h2>
</div>
<div class="product-slider">
<div class="product-item" data-aos="flip-left" data-aos-duration="1500" data-aos-offset="50">
<div class="image">
<img src="assets/images/shop/product1.png" alt="Product">
</div>
<div class="content">
<div class="ratting">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h6><a href="product-details.html">Airport Travel Suitcases</a></h6>
<span class="price">$188.00</span>
</div>
</div>
<div class="product-item" data-aos="flip-left" data-aos-duration="1500" data-aos-offset="50" data-aos-delay="50">
<div class="image">
<img src="assets/images/shop/product2.png" alt="Product">
</div>
<div class="content">
<div class="ratting">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h6><a href="product-details.html">Travel Great blue hat</a></h6>
<span class="price">$188.00</span>
</div>
</div>
<div class="product-item" data-aos="flip-left" data-aos-duration="1500" data-aos-offset="50" data-aos-delay="100">
<div class="image">
<img src="assets/images/shop/product3.png" alt="Product">
</div>
<div class="content">
<div class="ratting">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h6><a href="product-details.html">Waistband and Mesh Fashion</a></h6>
<span class="price">$188.00</span>
</div>
</div>
<div class="product-item" data-aos="flip-left" data-aos-duration="1500" data-aos-offset="50" data-aos-delay="150">
<div class="image">
<img src="assets/images/shop/product4.png" alt="Product">
</div>
<div class="content">
<div class="ratting">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h6><a href="product-details.html">Sandals for Casual Techies</a></h6>
<span class="price">$188.00</span>
</div>
</div>
<div class="product-item" data-aos="flip-left" data-aos-duration="1500" data-aos-offset="50">
<div class="image">
<img src="assets/images/shop/product5.png" alt="Product">
</div>
<div class="content">
<div class="ratting">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h6><a href="product-details.html">Children With Jute Soles</a></h6>
<span class="price">$188.00</span>
</div>
</div>
</div>
</div>
</section> -->
<!-- Shop Details Area end -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
const indemnityBox = document.getElementById('indemnityBox');
const agreeCheckbox = document.getElementById('agreeCheckbox');
const bookingForm = document.querySelector('form');
indemnityBox.addEventListener('scroll', function () {
const scrollTop = indemnityBox.scrollTop;
const scrollHeight = indemnityBox.scrollHeight;
const offsetHeight = indemnityBox.offsetHeight;
// Enable checkbox when scrolled to bottom
if (scrollTop + offsetHeight >= scrollHeight - 1) {
agreeCheckbox.disabled = false;
document.getElementById('agreeLabel').style.color = "#000"; // optional: make label active
}
});
bookingForm.addEventListener('submit', function (e) {
if (agreeCheckbox.disabled || !agreeCheckbox.checked) {
alert('Please read and agree to the indemnity terms before booking.');
e.preventDefault(); // stop form submission
}
});
</script>
<script>
$(document).ready(function() {
// Function to calculate booking total
function calculateTotal() {
// Get selected values from the form
var members = parseInt($('#members').val()) || 0; // Default to 1 vehicle if not selected
var nonmembers = parseInt($('#non-members').val()) || 0; // Default to 1 adult if not selected
// Fetch PHP variables
var isMember = <?php echo $is_member ? 'true' : 'false'; ?>;
var pendingMember = <?php echo $pending_member ? 'true' : 'false'; ?>;
var cost_members = <?= getPrice('bush_mechanics', 'member');?>;
var cost_nonmembers = <?= getPrice('bush_mechanics', 'nonmember');?>;
// Calculate the total cost based on membership
var total = 0;
// Calculate cost for members
if (isMember || pendingMember) {
total = (cost_members) + (members * cost_members) + (nonmembers * cost_nonmembers);
} else {
// Calculate cost for non-members
total = (cost_nonmembers) + (members * cost_members) + (nonmembers * cost_nonmembers);
}
// Update total price in the DOM
$('#booking_total').text('R ' + total.toFixed(2));
}
// Event listeners to trigger recalculation when any form field changes
$('#members, #non-members').on('change', function() {
calculateTotal();
});
// Initial calculation on page load
calculateTotal();
});
</script>
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php') ?>
+159
View File
@@ -0,0 +1,159 @@
<?php
if (!isset($page_id)) {
die("Page ID not set for comment system.");
}
$conn = openDatabaseConnection();
// Handle comment post
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit_comment'])) {
// Validate CSRF token
if (!isset($_POST['csrf_token']) || !validateCSRFToken($_POST['csrf_token'])) {
http_response_code(403);
die('Security token validation failed.');
}
$comment = trim($_POST['comment'] ?? '');
if (!empty($comment)) {
$stmt = $conn->prepare("INSERT INTO comments (page_id, user_id, comment) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $page_id, $user_id, $comment);
if ($stmt->execute()) {
header("Location: " . $_SERVER['REQUEST_URI']);
exit;
}
}
}
// Fetch comments
$stmt = $conn->prepare("SELECT user_id, comment, created_at FROM comments WHERE page_id = ? ORDER BY created_at DESC");
$stmt->bind_param("s", $page_id);
$stmt->execute();
$result = $stmt->get_result();
?>
<div>
<h5>Comments</h5>
<div class="comments">
<?php while ($row = $result->fetch_assoc()): ?>
<div class="comment-body" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<div>
<img class="profile-pic" src="<?= getProfilePic($user_id); ?>" alt="Author">
</div>
<div class="">
<h6><?= getFullName($row['user_id']); ?></h6>
<?php
if (getUserMemberStatus($row['user_id'])){
echo '<div class="badge badge-primary badge-pill">MEMBER</div>';
}
?>
<em><?= $row['created_at'] ?></em>
<!-- <div class="ratting">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div> -->
<p><?= nl2br(htmlspecialchars($row['comment'])) ?></p>
<!-- <a class="read-more" href="#">Reply <i class="far fa-angle-right"></i></a> -->
</div>
</div>
<?php endwhile; ?>
</form>
<!-- <h5>Add A Comment</h5> -->
<form method="POST" id="comment-form" class="comment-form bgc-lighter z-1 rel mt-30" name="review-form" action="" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
<div class="row gap-20">
<div class="col-md-12">
<div class="form-group">
<textarea name="comment" id="comment" class="form-control" rows="5" placeholder="Add comment..." required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group mb-0">
<button type="submit" name="submit_comment" class="theme-btn bgc-secondary style-two">
<span data-hover="Submit reviews">Add comment</span>
<i class="fal fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</form>
</div>
<style>
.comment-box {
border: 1px solid #ccc;
padding: 10px;
max-width: 600px;
}
.comment-box form input,
.comment-box form textarea {
width: 100%;
margin-bottom: 8px;
}
.comments-list {
margin-top: 20px;
}
.comment {
border-top: 1px solid #eee;
padding-top: 10px;
margin-top: 10px;
}
.profile-pic {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
object-fit: cover;
/* Ensures the image fits without distortion */
}
.badge {
display: inline-block;
padding: 0.4em 0.8em;
font-size: 0.875rem;
font-weight: 600;
color: white;
border-radius: 0.375em;
margin-right: 0.5em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-primary {
background-color: #e90000;
}
.badge-success {
background-color: #28a745;
}
.badge-warning {
background-color: #ffc107;
color: #212529;
}
.badge-danger {
background-color: #dc3545;
}
.badge-info {
background-color: #17a2b8;
}
.badge-pill {
border-radius: 999px;
}
</style>
+113
View File
@@ -0,0 +1,113 @@
<?php
$headerStyle = 'light';
$rootPath = dirname(dirname(dirname(__DIR__)));
include_once($rootPath . '/header.php');
?>
<style>
.image {
width: 400px;
/* Set your desired width */
height: 320px;
/* Set your desired height */
overflow: hidden;
/* Hide any overflow */
display: block;
/* Ensure proper block behavior */
}
.image img {
width: 100%;
/* Image scales to fill the container */
height: 100%;
/* Image scales to fill the container */
object-fit: cover;
/* Fills the container while maintaining aspect ratio */
object-position: top;
/* Aligns the top of the image with the top of the container */
display: block;
/* Prevents inline whitespace issues */
}
</style><?php
$pageTitle = 'Contact Us';
$breadcrumbs = [['Home' => 'index.php']];
require_once($rootPath . '/components/banner.php');
?>
<!-- Contact Info Area start -->
<section class="contact-info-area pt-100 rel z-1">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4">
<div class="contact-info-content mb-30 rmb-55" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<div class="section-title mb-30">
<h2>For any queries, please don't hesitate to contact us:</h2>
</div>
<!-- <p>Our dedicated support team is always ready to assist you with any questions or issues, offering prompt and personalized solutions to meet your needs.</p> -->
<!-- <div class="features-team-box mt-40">
<h6>85+ Expert Team member</h6>
<div class="feature-authors">
<img src="assets/images/features/feature-author1.jpg" alt="Author">
<img src="assets/images/features/feature-author2.jpg" alt="Author">
<img src="assets/images/features/feature-author3.jpg" alt="Author">
<img src="assets/images/features/feature-author4.jpg" alt="Author">
<img src="assets/images/features/feature-author5.jpg" alt="Author">
<img src="assets/images/features/feature-author6.jpg" alt="Author">
<img src="assets/images/features/feature-author7.jpg" alt="Author">
<span>+</span>
</div>
</div> -->
</div>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-md-6">
<div class="contact-info-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50" data-aos-delay="50">
<div class="icon"><i class="fas fa-envelope"></i></div>
<div class="content">
<h5>Need Help & Support</h5>
<div class="text"><i class="far fa-envelope"></i> <a href="mailto:info@4wdcsa.co.za">info@4wdcsa.co.za</a></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="contact-info-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50" data-aos-delay="100">
<div class="icon"><i class="fas fa-phone"></i></div>
<div class="content">
<h5>Need Anything Urgent</h5>
<div class="text"><i class="far fa-phone"></i> <a href="callto:+27 079 065 2795">+2779 065 2795</a></div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="contact-info-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50" data-aos-delay="50">
<div class="icon"><i class="fas fa-map-marker-alt"></i></div>
<div class="content">
<h5>BASE 4</h5>
<div class="text"><i class="fal fa-map-marker-alt"></i> Plot 50, Gemstone Rd, Doornrandje, Centurion, 0157</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Info Area end -->
<!-- Contact Form Area start -->
<!-- -->
<!-- Contact Form Area end -->
<!-- Contact Map Start -->
<div class="contact-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d818.9371187805272!2d28.000391592597513!3d-25.864399472588936!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2sza!4v1744639736430!5m2!1sen!2sza" style="border:0; width: 100%;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- Contact Map End -->
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
+133
View File
@@ -0,0 +1,133 @@
<?php
$headerStyle = 'light';
$rootPath = dirname(dirname(dirname(__DIR__)));
include_once($rootPath . '/header.php');
// Assuming you have the user ID stored in the session
if (isset($_SESSION['user_id'])) {
$user_id = $_SESSION['user_id'];
} else {
header('Location: login.php');
exit(); // Stop further script execution
}
?>
<style>
h2 {
text-align: center;
margin-bottom: 20px;
}
.indemnitycontainer {
max-width: 800px;
margin: 0 auto;
}
.indemnity-text {
text-align: justify;
margin-bottom: 20px;
}
.signature-container {
margin-top: 30px;
margin-bottom: 100px;
text-align: center;
}
#signature-pad {
border: 1px solid black;
}
</style>
<?php
$pageTitle = 'Indemnity';
$breadcrumbs = [['Home' => 'index.php']];
require_once($rootPath . '/components/banner.php');
?>
<!-- Page Banner End -->
<div class="indemnitycontainer pt-20">
<!-- <h2>Indemnity and Waiver</h2> -->
<div class="indemnity-text">
<p><strong>INDEMNITY AND WAIVER</strong></p>
<p>1. I agree to abide by the Code of Conduct as listed below, as well as any reasonable instructions given by any Member of the Committee of the Club, or any person appointed by the Club to organise or control any event (Club Officer).</p>
<p>2. I acknowledge that driving the off-road track is inherently dangerous, and that I am fully aware of the dangers thereof. I warrant that I will make all members of my party aware of such dangers prior to driving the track.</p>
<p>3. While I, or any member of my party, enjoy the facilities at Base 4 including overnight camping, picnicking, driving the track, using the swimming pool facility or activity or any other activity while at Base 4, I agree that under no circumstances shall the Club be liable for any loss or damage of any kind whatsoever (including consequential loss) which I or any of my party may suffer, regardless of how such loss or damage may have been caused or sustained, and whether or not as a result of the negligence or breach of contract (whether fundamental or otherwise) or other wrongful act of the Club, or any Club Officer, or any of the Clubs agents or contractors, and I hereby indemnify and hold harmless the Club and any Club Officer against all such loss or damage.</p>
<p>4. The expression, member of my party, means all persons who accompany me or attending any event at my specific invitation, request or suggestion, and includes without limitation, members of family, guests and invitees.</p>
<p>5. I understand that I am responsible for ensuring my vehicle and equipment and that all members of my party have adequate health and medical insurance to cover any and all likely occurrences.</p>
<p>6. This indemnity is irrevocable and shall apply to me and the members of my party for any Club events in which I may participate or attend.</p>
<p><strong>BASE 4 CODE OF CONDUCT</strong></p>
<p>1. No motorbikes or quadbikes.</p>
<p>2. No loud music (unless authorised by the Committee or its representatives).</p>
<p>3. Dogs to be controlled by their owners who take full responsibility for the animals behaviour.</p>
<p>4. No dogs belonging to non-members are allowed at Base 4 unless with the express permission of the Committee.</p>
<p>5. No person in the rear of open vehicles when driving on obstacles.</p>
<p>6. When driving the obstacles stay on the tracks.</p>
<p>7. Engage 4WD when driving the obstacles to minimise wear and damage to the track.</p>
<p>8. No alcohol to be consumed while driving the track.</p>
<p>9. No littering (please pick up cigarette butts etc.)</p>
<p>10. All rubbish is to be taken away with you when leaving. Dustbins and refuse collection is not provided.</p>
<p>11. Use water sparingly. Please bring your own water and a little extra for the Club.</p>
<p>I am a member of the Four Wheel Drive Club of Southern Africa and I will strive to uphold these Codes.</p>
</div>
<div class="signature-container">
<div style="text-align: center;" id="responseMessage"></div> <!-- Message display area -->
<p><strong>Signature</strong></p>
<canvas id="signature-pad" width=400 height=200></canvas><br>
<button type="button" class="theme-btn style-two" id="save">ACCEPT INDEMNITY</button>
<!-- <div class="pt-20" style="text-align: center;">You will be redirected to Payfast for payment.</div> -->
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
var canvas = document.getElementById('signature-pad');
var signaturePad = new SignaturePad(canvas);
document.getElementById('save').addEventListener('click', function() {
if (signaturePad.isEmpty()) {
alert("Please provide a signature.");
} else {
var dataUrl = signaturePad.toDataURL(); // Get signature as base64 image
$.ajax({
url: 'process_signature',
type: 'POST',
data: {
signature: dataUrl // Send the base64 signature image
},
success: function(response) {
// Parse response if needed
if (typeof response === "string") {
response = JSON.parse(response);
}
if (response.status === 'success') {
// Check if the user has paid
if (response.paymentStatus === 'PAID') {
// Redirect to membership_details.php if paid
setTimeout(function() {
window.location.href = 'membership_details.php';
}, 2000); // 2-second delay before redirecting
} else {
// Redirect to membership_payment.php if not paid
setTimeout(function() {
window.location.href = 'membership_payment.php';
}, 2000); // 2-second delay before redirecting
}
} else {
$('#responseMessage').html('<div class="alert alert-danger">' + response.message + '</div>');
}
},
error: function() {
$('#responseMessage').html('<div class="alert alert-danger">Error uploading signature.</div>');
}
});
}
});
</script>
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php') ?>
+20
View File
@@ -0,0 +1,20 @@
<p><strong>INDEMNITY AND WAIVER</strong></p>
<p>1. I agree to abide by the Code of Conduct as listed below, as well as any reasonable instructions given by any Member of the Committee of the Club, or any person appointed by the Club to organise or control any event (Club Officer).</p>
<p>2. I acknowledge that driving the off-road track is inherently dangerous, and that I am fully aware of the dangers thereof. I warrant that I will make all members of my party aware of such dangers prior to driving the track.</p>
<p>3. While I, or any member of my party, enjoy the facilities at Base 4 including overnight camping, picnicking, driving the track, using the swimming pool facility or activity or any other activity while at Base 4, I agree that under no circumstances shall the Club be liable for any loss or damage of any kind whatsoever (including consequential loss) which I or any of my party may suffer, regardless of how such loss or damage may have been caused or sustained, and whether or not as a result of the negligence or breach of contract (whether fundamental or otherwise) or other wrongful act of the Club, or any Club Officer, or any of the Clubs agents or contractors, and I hereby indemnify and hold harmless the Club and any Club Officer against all such loss or damage.</p>
<p>4. The expression, member of my party, means all persons who accompany me or attending any event at my specific invitation, request or suggestion, and includes without limitation, members of family, guests and invitees.</p>
<p>5. I understand that I am responsible for ensuring my vehicle and equipment and that all members of my party have adequate health and medical insurance to cover any and all likely occurrences.</p>
<p>6. This indemnity is irrevocable and shall apply to me and the members of my party for any Club events in which I may participate or attend.</p>
<p><strong>BASE 4 CODE OF CONDUCT</strong></p>
<p>1. No motorbikes or quadbikes.</p>
<p>2. No loud music (unless authorised by the Committee or its representatives).</p>
<p>3. Dogs to be controlled by their owners who take full responsibility for the animals behaviour.</p>
<p>4. No dogs belonging to non-members are allowed at Base 4 unless with the express permission of the Committee.</p>
<p>5. No person in the rear of open vehicles when driving on obstacles.</p>
<p>6. When driving the obstacles stay on the tracks.</p>
<p>7. Engage 4WD when driving the obstacles to minimise wear and damage to the track.</p>
<p>8. No alcohol to be consumed while driving the track.</p>
<p>9. No littering (please pick up cigarette butts etc.)</p>
<p>10. All rubbish is to be taken away with you when leaving. Dustbins and refuse collection is not provided.</p>
<p>11. Use water sparingly. Please bring your own water and a little extra for the Club.</p>
<p>I am a member of the Four Wheel Drive Club of Southern Africa and I will strive to uphold these Codes.</p>
+804
View File
@@ -0,0 +1,804 @@
<?php
$headerStyle = 'dark';
include_once(dirname(dirname(dirname(__DIR__))) . '/header.php');
$indemnityPending = false;
if (isset($_SESSION['user_id'])) {
$userId = $_SESSION['user_id'];
$stmt = $conn->prepare("SELECT user_id FROM membership_application WHERE user_id = ? AND accept_indemnity = 0 LIMIT 1");
$stmt->bind_param("i", $userId);
$stmt->execute();
$stmt->store_result();
if ($stmt->num_rows > 0) {
$indemnityPending = true;
}
$stmt->close();
}
?>
<style>
.countdown-container {
width: 100%;
/* background: #111; */
text-align: center;
padding: 40px 10px;
/* font-family: Arial, sans-serif; */
}
.countdown-container h1 {
font-size: 3rem;
line-height: 1.5;
}
@media (min-width: 768px) {
.countdown-container h1 {
font-size: 3rem;
}
}
</style>
<?php
$bannerFolder = 'assets/images/banners/';
$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
if (!empty($bannerImages)) {
$randomBanner = $bannerImages[array_rand($bannerImages)];
}
?>
<section class="hero-area bgc-black pt-200 rpt-120 rel z-2">
<div style="padding-bottom:30px;" class="container-fluid">
<div style="text-align: center; position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(rgba(28, 35, 31, 1), rgba(28, 35, 31, 0.5)), url('<?php echo $randomBanner; ?>'); background-size: cover; background-position: center;">
<div style="padding-top: 50px; padding-bottom: 50px;">
<img style="width: 250px; margin-bottom: 20px;" src="assets/images/logos/weblogo2.png" alt="Logo">
<h1 class="hero-title" data-aos="flip-up" data-aos-delay="50" data-aos-duration="1500" data-aos-offset="50">
Welcome to<br>the Four Wheel Drive Club<br>of Southern Africa
</h1>
<a href="membership" class="theme-btn style-two bgc-secondary" style="margin-top: 20px; background-color: #e90000; padding: 10px 20px; color: white; text-decoration: none; border-radius: 25px;">
<span data-hover="Become a Member">Become a Member</span>
<i class="fal fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Hero Area End -->
<!-- Destinations Area start -->
<?php
if (countUpcomingTrips() > 0) { ?>
<section class="destinations-area bgc-black pt-100 pb-70 rel z-1">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title text-white text-center counter-text-wrap mb-70" data-aos="fade-up"
data-aos-duration="1500" data-aos-offset="50">
<h2>Discover Africa's Treasures with 4WDCSA</h2>
<p>Join us on the following trips:</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<?php
// Query to retrieve data from the trips table
$sql = "SELECT trip_id, trip_name, location, short_description, start_date, end_date, vehicle_capacity, cost_members, places_booked FROM trips ORDER BY trip_id DESC LIMIT 4";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// Loop through each row
while ($row = $result->fetch_assoc()) {
$trip_id = $row['trip_id'];
$trip_name = $row['trip_name'];
$location = $row['location'];
$short_description = $row['short_description'];
$start_date = $row['start_date'];
$end_date = $row['end_date'];
$capacity = $row['vehicle_capacity'];
$cost_members = $row['cost_members'];
$places_booked = $row['places_booked'];
$remaining_places = $capacity - $places_booked;
// Determine the badge text based on the status
$badge_text = ($remaining_places > 0) ? $remaining_places . ' PLACES LEFT!!' : 'FULLY BOOKED';
echo '
<div class="col-xxl-3 col-xl-4 col-md-6">
<div class="destination-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<div class="image">
<img src="assets/images/trips/' . $trip_id . '_01.jpg" alt="' . $trip_name . '">
</div>
<div class="content">
<span class="location"><i class="fal fa-map-marker-alt"></i> ' . $location . '</span>
<h5><a href="trip-details.php?trip_id=' . $trip_id . '">' . $trip_name . '</a></h5>
<span class="time">' . convertDate($start_date) . ' - ' . convertDate($end_date) . '</span><br>
<span class="time">' . calculateDaysAndNights($start_date, $end_date) . '</span>
</div>
<div class="destination-footer">
<span class="price"><span>R ' . $cost_members . '</span>/per member</span>
<a href="trip-details.php?trip_id=' . $trip_id . '" class="read-more">Book Now <i class="fal fa-angle-right"></i></a>
</div>
</div>
</div>';
}
} else {
echo "No trips available.";
}
?>
</div>
</div>
</section>
<!-- Destinations Area end -->
<?php
}
?>
<!-- About Us Area start -->
<section class="about-us-area py-100 rpb-90 rel z-1">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-5 col-lg-6">
<div class="about-us-content rmb-55" data-aos="fade-left" data-aos-duration="1500"
data-aos-offset="50">
<div class="section-title mb-25">
<h2>Become a member of 4WDCSA</h2>
<p>Sign up for an annual membership and receive:</p>
<ul class="list-style-two mt-35 mb-30">
<li>Year round access to BASE4</li>
<li>FREE Camping at BASE4</li>
<li>Up to 95% Discount on Training Courses</li>
<li>Exclusive Member discounts for all trips and events</li>
<li>... and many more!</li>
</ul>
</div>
<p>We go above and beyond to make your travel dreams reality hidden gems and must-see
attractions</p>
<a href="membership" class="theme-btn mt-10 style-two">
<span data-hover="Become A Member">Become A Member</span>
<i class="fal fa-arrow-right"></i>
</a>
</div>
</div>
<div class="col-xl-7 col-lg-6" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
<div class="about-us-image">
<!-- <div class="shape"><img src="assets/images/about/shape1.png" alt="Shape"></div>
<div class="shape"><img src="assets/images/about/shape2.png" alt="Shape"></div>
<div class="shape"><img src="assets/images/about/shape3.png" alt="Shape"></div>
<div class="shape"><img src="assets/images/about/shape4.png" alt="Shape"></div>
<div class="shape"><img src="assets/images/about/shape5.png" alt="Shape"></div>
<div class="shape"><img src="assets/images/about/shape6.png" alt="Shape"></div>
<div class="shape"><img src="assets/images/about/shape7.png" alt="Shape"></div> -->
<img src="assets/images/logos/weblogo.png" alt="About">
</div>
</div>
</div>
</div>
</section>
<!-- About Us Area end -->
<section class="hotel-area bgc-black py-100 rel z-1">
<div class="countdown-container">
<h1 style="color: #e5f5e0;" id="countdown">Loading countdown...</h1>
<a href="events" class="theme-btn style-two bgc-secondary" style="margin-top: 20px; background-color: #e90000; padding: 10px 20px; color: white; text-decoration: none; border-radius: 25px;">
<span data-hover="Events">Find out more!</span>
<i class="fal fa-arrow-right"></i>
</a>
</div>
</section>
<!-- Popular Destinations Area start -->
<!-- <section class="popular-destinations-area rel z-1">
<div class="container-fluid">
<div class="popular-destinations-wrap br-20 bgc-lighter pt-100 pb-70">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title text-center counter-text-wrap mb-70" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<h2>Explore Popular Destinations</h2>
<p>One site <span class="count-text plus" data-speed="3000" data-stop="34500">0</span> most popular experience</p>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-3 col-md-6">
<div class="destination-item style-two" data-aos="flip-up" data-aos-duration="1500" data-aos-offset="50">
<div class="image">
<a href="#" class="heart"><i class="fas fa-heart"></i></a>
<img src="assets/images/destinations/destination1.jpg" alt="Destination">
</div>
<div class="content">
<h6><a href="destination-details.html">Thailand beach</a></h6>
<span class="time">5352+ tours & 856+ Activity</span>
<a href="#" class="more"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="destination-item style-two" data-aos="flip-up" data-aos-delay="100" data-aos-duration="1500" data-aos-offset="50">
<div class="image">
<a href="#" class="heart"><i class="fas fa-heart"></i></a>
<img src="assets/images/destinations/destination2.jpg" alt="Destination">
</div>
<div class="content">
<h6><a href="destination-details.html">Parga, Greece</a></h6>
<span class="time">5352+ tours & 856+ Activity</span>
<a href="#" class="more"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="destination-item style-two" data-aos="flip-up" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
<div class="image">
<a href="#" class="heart"><i class="fas fa-heart"></i></a>
<img src="assets/images/destinations/destination3.jpg" alt="Destination">
</div>
<div class="content">
<h6><a href="destination-details.html">Castellammare del Golfo, Italy</a></h6>
<span class="time">5352+ tours & 856+ Activity</span>
<a href="#" class="more"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="destination-item style-two" data-aos="flip-up" data-aos-duration="1500" data-aos-offset="50">
<div class="image">
<a href="#" class="heart"><i class="fas fa-heart"></i></a>
<img src="assets/images/destinations/destination4.jpg" alt="Destination">
</div>
<div class="content">
<h6><a href="destination-details.html">Reserve of Canada, Canada</a></h6>
<span class="time">5352+ tours & 856+ Activity</span>
<a href="#" class="more"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="destination-item style-two" data-aos="flip-up" data-aos-delay="100" data-aos-duration="1500" data-aos-offset="50">
<div class="image">
<a href="#" class="heart"><i class="fas fa-heart"></i></a>
<img src="assets/images/destinations/destination5.jpg" alt="Destination">
</div>
<div class="content">
<h6><a href="destination-details.html">Dubai united states</a></h6>
<span class="time">5352+ tours & 856+ Activity</span>
<a href="#" class="more"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="destination-item style-two" data-aos="flip-up" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
<div class="image">
<a href="#" class="heart"><i class="fas fa-heart"></i></a>
<img src="assets/images/destinations/destination6.jpg" alt="Destination">
</div>
<div class="content">
<h6><a href="destination-details.html">Milos, Greece</a></h6>
<span class="time">5352+ tours & 856+ Activity</span>
<a href="#" class="more"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> -->
<!-- Popular Destinations Area end -->
<!-- Features Area start -->
<section class="features-area pt-100 pb-45 rel z-1">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-6">
<div class="features-content-part mb-55" data-aos="fade-left" data-aos-duration="1500"
data-aos-offset="50">
<div class="section-title mb-20">
<h2><b>BASE 4:</b> The home of 4WDCSA.</h2>
<p>Situated near the Hennops river, in Doornrandjie, Centurion.</p>
<div class="image">
<img style="border-radius:10px;" src="assets/images/base4/base4.jpg" alt="Hotel">
</div>
</div>
<div class="menu-btns py-10">
<a href="membership.php" class="theme-btn style-two bgc-secondary">
<span data-hover="Become a Member">Become a Member</span>
<i class="fal fa-arrow-right"></i>
</a>
</div>
<!-- <div class="menu-btns py-10">
<a href="campsite_booking" class="theme-btn style-two bgc-secondary">
<span data-hover="Book a Campsite">Book a Campsite</span>
<i class="fal fa-arrow-right"></i>
</a>
</div> -->
<!-- <div class="features-customer-box">
<div class="image">
<img src="assets/images/features/features-box.jpg" alt="Features">
</div>
<div class="content">
<div class="feature-authors mb-15">
<img src="assets/images/features/feature-author1.jpg" alt="Author">
<img src="assets/images/features/feature-author2.jpg" alt="Author">
<img src="assets/images/features/feature-author3.jpg" alt="Author">
<span>4k+</span>
</div>
<h6>850K+ Happy Customer</h6>
<div class="divider style-two counter-text-wrap my-25"><span><span class="count-text plus" data-speed="3000" data-stop="25">0</span> Years</span></div>
<p>We pride ourselves offering personalized itineraries</p>
</div>
</div> -->
</div>
</div>
<div class="col-xl-6" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
<div class="row pb-25">
<div class="col-md-6">
<div class="feature-item">
<div class="icon"><i class="flaticon-tent"></i></div>
<div class="content">
<h5><a href="trip-details.php">Club House</a></h5>
<p>We are currently in the process of building a new club house since the previous club house tragically burnt down in November of 2024.
</p>
</div>
</div>
<div class="feature-item">
<div class="icon"><i class="flaticon-tent"></i></div>
<div class="content">
<h5><a href="trip-details.php">4x4 Training Track</a></h5>
<p>Test your offroad driving skills on our training track with many obstacles
from rocky climbs, daring axle twisters, log bridge, side slopes and more!
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="feature-item mt-20">
<div class="icon"><i class="flaticon-tent"></i></div>
<div class="content">
<h5><a href="trip-details.php">24/7 Camping</a></h5>
<p>Pristene Camping grounds situated next to a stream, with ablutions, lapa and
communal fire pits.</p>
</div>
</div>
<div class="feature-item">
<div class="icon"><i class="flaticon-tent"></i></div>
<div class="content">
<h5><a href="trip-details.php">Swimming pool & Braai areas</a></h5>
<p>Unwind with a refreshing dip in our crystal-clear swimming pool or gather around the braai area for good food and great company</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Area end -->
<!-- Hotel Area start -->
<section class="hotel-area bgc-black py-100 rel z-1">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title text-white text-center counter-text-wrap mb-70" data-aos="fade-up"
data-aos-duration="1500" data-aos-offset="50">
<h2>Driver Training Courses</h2>
<p>Discover the in's and out's of your Four Wheel Drive with one of our dedicated training
courses:</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xxl-6 col-xl-8 col-lg-10">
<div class="destination-item style-three" data-aos="fade-up" data-aos-duration="1500"
data-aos-offset="50">
<div class="image">
<!-- <div class="ratting"><i class="fas fa-star"></i> 4.8</div> -->
<!-- <a href="#" class="heart"><i class="fas fa-heart"></i></a> -->
<img src="assets/images/courses/driver_training.png" alt="Hotel">
</div>
<div class="content">
<span class="location"><i class="fal fa-map-marker-alt"></i> BASE4, Hennops</span>
<h5><a href="driver_training">Basic 4X4 Driver Training</a></h5>
<ul class="list-style-three">
<li>Master Off-Road Confidence</li>
<li>Hands-On Training</li>
<li>Safety First</li>
<!-- <li><i class="fal fa-router"></i> Internet</li> -->
</ul>
<div class="destination-footer">
<span class="price"><span>R <?= getPrice('driver_training', 'member'); ?></span>/for members</span>
<span class="price"><span>R <?= getPrice('driver_training', 'nonmember'); ?></span>/for non-members</span>
<a href="driver_training" class="read-more">Book Now <i class="fal fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-8 col-lg-10">
<div class="destination-item style-three" data-aos="fade-up" data-aos-delay="50"
data-aos-duration="1500" data-aos-offset="50">
<div class="image">
<!-- <div class="ratting"><i class="fas fa-star"></i> 4.8</div> -->
<!-- <a href="#" class="heart"><i class="fas fa-heart"></i></a> -->
<img src="assets/images/courses/bush_mechanics.png" alt="Hotel">
</div>
<div class="content">
<span class="location"><i class="fal fa-map-marker-alt"></i> BASE4, Hennops</span>
<h5><a href="bush_mechanics">Bush Mechanics Course</a></h5>
<ul class="list-style-three">
<li>Fix Your Vehicle in the Wild</li>
<li>Survival Skills for Off-Roaders</li>
<li>Hands-On Experience</li>
<!-- <li><i class="fal fa-router"></i> Internet</li> -->
</ul>
<div class="destination-footer">
<span class="price"><span>R <?= getPrice('bush_mechanics', 'member'); ?></span>/for members</span>
<span class="price"><span>R <?= getPrice('bush_mechanics', 'nonmember'); ?></span>/for non-members</span>
<a href="bush_mechanics" class="read-more">Book Now <i class="fal fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-8 col-lg-10">
<div class="destination-item style-three" data-aos="fade-up" data-aos-duration="1500"
data-aos-offset="50">
<div class="content">
<span class="location"><i class="fal fa-map-marker-alt"></i> BASE4, Hennops</span>
<h5><a href="rescue_recovery">Rescue & Recovery Course</a></h5>
<ul class="list-style-three">
<li>Master Advanced Recovery Techniques</li>
<li>Gain Confidence in High-Stress Situations</li>
<li>Teamwork and Communication</li>
<!-- <li><i class="fal fa-router"></i> Internet</li> -->
</ul>
<div class="destination-footer">
<span class="price"><span>R <?= getPrice('rescue_recovery', 'member'); ?></span>/for members</span>
<span class="price"><span>R <?= getPrice('rescue_recovery', 'nonmember'); ?></span>/for non-members</span>
<a href="rescue_recovery" class="read-more">Book Now <i class="fal fa-angle-right"></i></a>
</div>
</div>
<div class="image">
<!-- <div class="ratting"><i class="fas fa-star"></i> 4.8</div> -->
<!-- <a href="#" class="heart"><i class="fas fa-heart"></i></a> -->
<img src="assets/images/courses/rescue_recovery.png" alt="Hotel">
</div>
</div>
</div>
</div>
</div>
<!-- <div class="hotel-more-btn text-center mt-40">
<a href="destination2.html" class="theme-btn style-four">
<span data-hover="Explore More Hotel">Explore More Hotel</span>
<i class="fal fa-arrow-right"></i>
</a>
</div> -->
</div>
</section>
<!-- Hotel Area end -->
<!-- CTA Area start -->
<!-- <section class="cta-area pt-100 rel z-1">
<div class="container-fluid">
<div class="row">
<div class="col-xl-4 col-md-6" data-aos="zoom-in-down" data-aos-duration="1500" data-aos-offset="50">
<div class="cta-item" style="background-image: url(assets/images/cta/cta1.jpg);">
<span class="category">Tent Camping</span>
<h2>Explore the world best tourism</h2>
<a href="trip-details.php" class="theme-btn style-two bgc-secondary">
<span data-hover="Explore Tours">Explore Tours</span>
<i class="fal fa-arrow-right"></i>
</a>
</div>
</div>
<div class="col-xl-4 col-md-6" data-aos="zoom-in-down" data-aos-delay="50" data-aos-duration="1500" data-aos-offset="50">
<div class="cta-item" style="background-image: url(assets/images/cta/cta2.jpg);">
<span class="category">Sea Beach</span>
<h2>World largest Sea Beach in Thailand</h2>
<a href="trip-details.php" class="theme-btn style-two">
<span data-hover="Explore Tours">Explore Tours</span>
<i class="fal fa-arrow-right"></i>
</a>
</div>
</div>
<div class="col-xl-4 col-md-6" data-aos="zoom-in-down" data-aos-delay="100" data-aos-duration="1500" data-aos-offset="50">
<div class="cta-item" style="background-image: url(assets/images/cta/cta3.jpg);">
<span class="category">Water Falls</span>
<h2>Largest Water falls Bali, Indonesia</h2>
<a href="trip-details.php" class="theme-btn style-two bgc-secondary">
<span data-hover="Explore Tours">Explore Tours</span>
<i class="fal fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</section> -->
<!-- CTA Area end -->
<!-- Blog Area start -->
<section class="blog-area py-70 rel z-1">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title text-center counter-text-wrap mb-70" data-aos="fade-up"
data-aos-duration="1500" data-aos-offset="50">
<h2>Read about our past trips and events</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<?php
$sql = "SELECT blog_id, title, date, category, image, description, author, link, members_only FROM blogs ORDER BY date DESC LIMIT 3";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// Loop through each row
while ($row = $result->fetch_assoc()) {
$blog_id = $row['blog_id'];
$blog_title = $row['title'];
$blog_date = $row['date'];
$blog_category = $row['category'];
$blog_image = $row['image'];
$blog_description = $row['description'];
$blog_author = $row['author'];
$members_only = $row['members_only'];
if ($members_only) {
if (!isset($_SESSION['user_id'])) {
$blog_link = "login.php";
$button_hover = "Members Only";
$icon = "fa-lock";
} else {
if (getUserMemberStatus($_SESSION['user_id'])) {
$blog_link = $row['link'];
$button_hover = "Read More";
$icon = "fa-arrow-right";
} else {
$blog_link = "membership.php";
$button_hover = "Members Only";
$icon = "fa-lock";
}
}
} else {
$blog_link = $row['link'];
$button_hover = "Read More";
$icon = "fa-arrow-right";
}
echo '
<div class="col-xl-4 col-md-6">
<div class="blog-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<div class="content">
<a href="#" class="category">' . $blog_category . '</a>
<h5><a href="' . $blog_link . '">' . $blog_title . '</a></h5>
<ul class="blog-meta">
<li><i class="far fa-calendar-alt"></i> <a href="#">' . $blog_date . '</a></li>
<li><i class="far fa-user"></i>' . getFullName($blog_author) . '</li>
</ul>
</div>
<div class="image">
<img style="border-radius:20px;" src="assets/images/blog/' . $blog_id . '/' . $blog_image . '" alt="Blog List">
</div>
<a style="width:100%;" href="' . $blog_link . '" class="theme-btn">
<span style="width:100%;" data-hover="' . $button_hover . '">Read More</span>
<i class="fal ' . $icon . '"></i>
</a>
</div>
</div>';
}
// Close connection
$conn->close();
} ?>
</div>
</div>
</section>
<!-- Blog Area end -->
<section class="bgc-black py-20 rel z-1">
<?php include_once('ad_banner.php'); ?>
</section>
<section class="py-20 rel z-1">
<?php include_once('logos.php'); ?>
</section>
<!-- footer area start -->
<footer class="main-footer bgs-cover overlay rel z-1 pb-25"
style="background-image: url(assets/images/backgrounds/footer.jpg);">
<div class="container">
<div class="footer-top pt-100 pb-30">
<div class="row justify-content-between">
<div class="col-xl-5 col-lg-6" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<div class="footer-widget footer-contact">
<a href="https://chat.whatsapp.com/JD9xQuJlVX5AAJwcLrpl2B" target="_blank" style="text-decoration: none; color: inherit;">
<div style="display: flex; align-items: center; background-color: #e5f5e0; border-radius: 10px; padding: 10px; max-width: 100%; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">
<img src="assets/images/icons/whatsapp.png" alt="WhatsApp" style="width: 64px; height: 64px; margin-right: 15px;">
<h1 style="margin: 0; font-size: 24px;">Join our WhatsApp Group</h1>
</div>
</a>
</div>
<div class="footer-widget footer-contact">
<div class="footer-title">
<h5>Get In Touch</h5>
</div>
<ul class="list-style-one">
<li><i class="fal fa-map-marked-alt"></i> Plot 50 Gemstone Rd, Doornrandje, Centurion, 0157</li>
<li><i class="fal fa-envelope"></i> <a
href="mailto:info@4wdcsa.co.za">info@4wdcsa.co.za</a></li>
<li><i class="fal fa-clock"></i> Mon - Fri, 09:00 - 17:00</li>
<li><i class="fal fa-phone-volume"></i> <a href="callto:+2779 065 2795">079 065 2795</a></li>
</ul>
</div>
</div>
<div class="col-xl-5 col-lg-6" data-aos="fade-up" data-aos-delay="50" data-aos-duration="1500"
data-aos-offset="50">
<div class="section-title counter-text-wrap mb-35">
<h2>Subscribe to our Mailing List</h2>
<p>Receive news and updates about upcoming trips and events.</p>
</div>
<div id="mc_embed_shell">
<div id="mc_embed_signup">
<form class="newsletter-form mb-50" action="https://fwdcsa.us17.list-manage.com/subscribe/post?u=3c26590bcc200ef52edc0bec2&amp;id=3c370893eb&amp;f_id=0099ebe3f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self" novalidate="">
<div id="mc_embed_signup_scroll" style="width:100%;">
<div class="mc-field-group"></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value="" placeholder="Email"></div>
<div class="mc-field-group"><input type="text" name="FNAME" class=" text" id="mce-FNAME" value="" placeholder="First Name"></div>
<div class="mc-field-group"><input type="text" name="LNAME" class=" text" id="mce-LNAME" value="" placeholder="Last Name"></div>
<div class="mc-field-group"><input type="text" name="PHONE" class="REQ_CSS" id="mce-PHONE" value="" placeholder="Phone Number"></div>
<div hidden=""><input type="hidden" name="tags" value="8324220"></div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
<div aria-hidden="true" style="position: absolute; left: -5000px;"><input type="text" name="b_3c26590bcc200ef52edc0bec2_3c370893eb" tabindex="-1" value=""></div>
<div class="clear"><input style="width:100%;" type="submit" name="subscribe" id="mc-embedded-subscribe" class="theme-btn bgc-secondary style-two" value="Subscribe"></div>
</div>
</form>
</div>
</div>
<!--
<form class="newsletter-form mb-50" action="#">
<input id="news-email" type="email" placeholder="Email Address" required>
<button type="submit" class="theme-btn bgc-secondary style-two">
<span data-hover="Subscribe">Subscribe</span>
<i class="fal fa-arrow-right"></i>
</button>
</form> -->
</div>
</div>
</div>
</div>
<div class="footer-bottom pt-20 pb-5">
<div class="container">
<div class="row">
<div class="col-lg-5">
<div class="copyright-text text-center text-lg-start">
<p>Copyright © <?php echo date("Y"); ?> <a href="index.html">4WDCSA</a> | All rights reserved.</p>
</div>
</div>
<div class="col-lg-7 text-center text-lg-end">
<ul class="footer-bottom-nav">
<li><a href="privacy_policy">Privacy Policy</a></li>
<!-- <li><a href="about.html">Terms</a></li> -->
<!-- <li><a href="about.html">Privacy Policy</a></li> -->
<!-- <li><a href="about.html">Legal notice</a></li> -->
<!-- <li><a href="about.html">Accessibility</a></li> -->
</ul>
</div>
</div>
<!-- Scroll Top Button -->
<button class="scroll-top scroll-to-target" data-target="html"><img
src="assets/images/icons/scroll-up.png" alt="Scroll Up"></button>
</div>
</div>
</footer>
<!-- footer area end -->
</div>
<!--End pagewrapper-->
<?php if ($indemnityPending): ?>
<!-- Bootstrap Modal -->
<div class="modal fade" id="indemnityModal" tabindex="-1" aria-labelledby="indemnityModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content border-secondary">
<div class="modal-header bg-secondary text-white">
<h5 class="modal-title" id="indemnityModalLabel">Membership Application Incomplete</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
To link your existing FWDCSA membership, you need to sign and accept the indemnity aggreement before proceeding.<br>
<a style="width:100%; border-radius:20px;" href="indemnity" class="btn btn-danger mt-3">Review and Accept</a>
</div>
</div>
</div>
</div>
<script>
// Show modal when page loads
document.addEventListener("DOMContentLoaded", function() {
var indemnityModal = new bootstrap.Modal(document.getElementById('indemnityModal'));
indemnityModal.show();
});
</script>
<?php endif; ?>
<!-- Jquery -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Appear Js -->
<script src="assets/js/appear.min.js"></script>
<!-- Slick -->
<script src="assets/js/slick.min.js"></script>
<!-- Magnific Popup -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!-- Nice Select -->
<script src="assets/js/jquery.nice-select.min.js"></script>
<!-- Image Loader -->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<!-- Skillbar -->
<script src="assets/js/skill.bars.jquery.min.js"></script>
<!-- Isotope -->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!-- AOS Animation -->
<script src="assets/js/aos.js"></script>
<!-- Custom script -->
<script src="assets/js/script.js"></script>
<script>
// Set your target date and time
const targetDate = new Date("<?php echo getNextOpenDayDate(); ?>T08:00:00"); // yyyy-mm-ddThh:mm:ss
function updateCountdown() {
const now = new Date();
const diff = targetDate - now;
if (diff <= 0) {
document.getElementById("countdown").innerHTML = "We're open now!";
return;
}
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((diff / (1000 * 60)) % 60);
const seconds = Math.floor((diff / 1000) % 60);
document.getElementById("countdown").innerHTML =
`${String(days).padStart(2, '0')} days ` +
`${String(hours).padStart(2, '0')} hours ` +
`${String(minutes).padStart(2, '0')} minutes ` +
`${String(seconds).padStart(2, '0')} seconds<br>` +
`till our next BASE4 Open Day!`;
}
updateCountdown(); // initial call
setInterval(updateCountdown, 1000);
</script>
</body>
</html>
+14
View File
@@ -0,0 +1,14 @@
<div class="container my-4">
<div class="row justify-content-center align-items-center g-3">
<?php
$sponsorDir = 'assets/images/sponsors/';
$sponsorImages = glob($sponsorDir . '*.{jpg,jpeg,png,gif,svg,webp}', GLOB_BRACE);
foreach ($sponsorImages as $img) {
echo "
<div class='col-auto'>
<img src='$img' alt='Sponsor logo' style='max-height:120px; max-width:240px; object-fit:contain;'>
</div>";
}
?>
</div>
</div>
+91
View File
@@ -0,0 +1,91 @@
<?php
require_once("env.php");
require_once("session.php");
require_once("connection.php");
require_once("functions.php");?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal with AJAX Dropdown</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal">
Open Modal
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="userModalLabel">Select a User</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="barTabForm">
<div class="mb-3">
<label for="userSelect" class="form-label">Choose a User</label>
<select class="form-select" id="userSelect" name="user_id" required>
<option value="">Loading...</option>
</select>
</div>
<button type="submit" class="btn btn-success">Create Bar Tab</button>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
// Load users into dropdown when modal opens
$('#userModal').on('shown.bs.modal', function () {
$.ajax({
url: 'fetch_users',
method: 'GET',
dataType: 'json',
success: function (data) {
let dropdown = $('#userSelect');
dropdown.empty();
dropdown.append('<option value="">Select a user</option>');
data.forEach(user => {
dropdown.append(`<option value="${user.id}">${user.first_name} ${user.last_name}</option>`);
});
},
error: function () {
alert('Error fetching users.');
}
});
});
// Handle form submission
$('#barTabForm').submit(function (e) {
e.preventDefault(); // Prevent default form submission
$.ajax({
url: 'create_bar_tab',
method: 'POST',
data: $(this).serialize(),
success: function (response) {
alert('Bar tab created successfully!');
$('#userModal').modal('hide'); // Close modal
},
error: function () {
alert('Error creating bar tab.');
}
});
});
});
</script>
</body>
</html>
File diff suppressed because one or more lines are too long
+317
View File
@@ -0,0 +1,317 @@
<?php
$headerStyle = 'light';
$rootPath = dirname(dirname(dirname(__DIR__)));
include_once($rootPath . '/header.php');
checkUserSession();
// SQL query to fetch dates for rescue & recovery
$stmt = $conn->prepare("SELECT course_id, date FROM courses WHERE course_type = ? AND date >= CURDATE()");
$course_type = 'rescue_recovery';
$stmt->bind_param("s", $course_type);
$stmt->execute();
$result = $stmt->get_result();
$page_id = 'rescue_recovery';
?>
<style>
.form-group {
margin-bottom: 15px;
}
select {
width: 100%;
padding: 8px;
font-size: 16px;
}
</style><?php
$pageTitle = 'Rescue & Recovery';
$breadcrumbs = [['Home' => 'index.php']];
require_once($rootPath . '/components/banner.php');
?>
<!-- Product Details Start -->
<section class="product-details pt-100">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="product-details-images rmb-55" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
<div class="tab-content preview-images">
<div class="tab-pane fade preview-item active show" id="preview1">
<img src="assets/images/drivertraining/01.jpg" alt="Perview">
</div>
<div class="tab-pane fade preview-item" id="preview2">
<img src="assets/images/drivertraining/02.jpg" alt="Perview">
</div>
<div class="tab-pane fade preview-item" id="preview3">
<img src="assets/images/drivertraining/03.jpg" alt="Perview">
</div>
</div>
<div class="nav thumb-images rmb-20">
<a href="#preview1" data-bs-toggle="tab" class="thumb-item active show">
<img src="assets/images/drivertraining/01.jpg" alt="Thumb">
</a>
<a href="#preview2" data-bs-toggle="tab" class="thumb-item">
<img src="assets/images/drivertraining/02.jpg" alt="Thumb">
</a>
<a href="#preview3" data-bs-toggle="tab" class="thumb-item">
<img src="assets/images/drivertraining/03.jpg" alt="Thumb">
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="product-details-content" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
<div class="section-title">
<h2>Rescue & Recovery</h2>
</div>
<!-- <div class="ratting mb-15">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>(5.8k+ reviews)</span>
</div> -->
<span class="price mb-5">R <?= getPrice('rescue_recovery', 'member'); ?>/member</span>
<span class="price mb-25">R <?= getPrice('rescue_recovery', 'nonmember'); ?>/non-members</span>
<p> This is an enjoyable, educational, and informative day. This one-day course is a natural follow-on from our 4x4 driving course and introduces drivers to safe off-road recovery procedures, equipment and also their responsibilities in regards to caring for the environment.</p>
<hr class="mt-40">
<div class="blog-sidebar tour-sidebar">
<div class="widget widget-booking" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<form action="process_course_booking" method="POST">
<ul class="tickets clearfix">
<li>
Select Date
<select name="course_id" id="course_id" required>
<?php
if ($result->num_rows > 0) {
// Output each course as an option
while ($row = $result->fetch_assoc()) {
$course_id = htmlspecialchars($row['course_id']); // Escape output for security
$date = htmlspecialchars($row['date']); // Escape output for security
echo "<option value='$course_id'>$date</option>";
}
} else {
echo "<option value='' disabled>No dates available</option>";
}
?>
</select>
</li>
<?php
if ($is_member || $pending_member) {
echo '
<li>
Additional Members <span class="price"></span>
<select name="members" id="members">
<option value="0" selected>00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
</select>
</li>
';
} ?>
<li>
Additional Non-Members <span class="price"></span>
<select name="non-members" id="non-members">
<option value="0" selected>00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
</select>
</li>
</ul>
<hr class="mb-25">
<h6>Total: <span id="booking_total" class="price">-</span></h6>
<div style="margin: 20px 0;">
<div id="indemnityBox" style="border: 1px solid #ccc; padding: 10px; height: 150px; overflow-y: scroll; background: #f9f9f9; font-size: 12px;">
<p><strong>INDEMNITY AND WAIVER</strong></p>
<p>1. I agree to abide by the Code of Conduct as listed below, as well as any reasonable instructions given by any Member of the Committee of the Club, or any person appointed by the Club to organise or control any event (Club Officer).</p>
<p>2. I acknowledge that driving the off-road track is inherently dangerous, and that I am fully aware of the dangers thereof. I warrant that I will make all members of my party aware of such dangers prior to driving the track.</p>
<p>3. While I, or any member of my party, enjoy the facilities at Base 4 including overnight camping, picnicking, driving the track, using the swimming pool facility or activity or any other activity while at Base 4, I agree that under no circumstances shall the Club be liable for any loss or damage of any kind whatsoever (including consequential loss) which I or any of my party may suffer, regardless of how such loss or damage may have been caused or sustained, and whether or not as a result of the negligence or breach of contract (whether fundamental or otherwise) or other wrongful act of the Club, or any Club Officer, or any of the Clubs agents or contractors, and I hereby indemnify and hold harmless the Club and any Club Officer against all such loss or damage.</p>
<p>4. The expression, member of my party, means all persons who accompany me or attending any event at my specific invitation, request or suggestion, and includes without limitation, members of family, guests and invitees.</p>
<p>5. I understand that I am responsible for ensuring my vehicle and equipment and that all members of my party have adequate health and medical insurance to cover any and all likely occurrences.</p>
<p>6. This indemnity is irrevocable and shall apply to me and the members of my party for any Club events in which I may participate or attend.</p>
<p><strong>BASE 4 CODE OF CONDUCT</strong></p>
<p>1. No motorbikes or quadbikes.</p>
<p>2. No loud music (unless authorised by the Committee or its representatives).</p>
<p>3. Dogs to be controlled by their owners who take full responsibility for the animals behaviour.</p>
<p>4. No dogs belonging to non-members are allowed at Base 4 unless with the express permission of the Committee.</p>
<p>5. No person in the rear of open vehicles when driving on obstacles.</p>
<p>6. When driving the obstacles stay on the tracks.</p>
<p>7. Engage 4WD when driving the obstacles to minimise wear and damage to the track.</p>
<p>8. No alcohol to be consumed while driving the track.</p>
<p>9. No littering (please pick up cigarette butts etc.)</p>
<p>10. All rubbish is to be taken away with you when leaving. Dustbins and refuse collection is not provided.</p>
<p>11. Use water sparingly. Please bring your own water and a little extra for the Club.</p>
<p>I am a member of the Four Wheel Drive Club of Southern Africa and I will strive to uphold these Codes.</p>
</div>
<div style="margin-top: 10px;">
<input type="checkbox" id="agreeCheckbox" name="agree" disabled required>
<label for="agreeCheckbox" id="agreeLabel" style="color: #888;">I have read and agree to the indemnity terms</label>
</div>
</div>
<?php
$button_text = "Book Now";
$button_disabled = "";
if (!$result || $result->num_rows == 0) {
$button_text = "No booking dates available";
$button_disabled = "disabled";
}
?>
<button type="submit" class="theme-btn style-two w-100 mt-15 mb-5" <?php echo $button_disabled; ?>>
<span data-hover="<?php echo $button_text; ?>"><?php echo $button_text; ?></span>
<i class="fal fa-arrow-right"></i>
</button>
<div class="text-center">
<a href="mailto:info@4wdcsa.co.za">Need some help?</a>
</div>
</form>
</div>
</div>
<!-- <hr class="mb-45"> -->
<!-- <a href="#" class="wishlist"><i class="far fa-heart"></i> Add to Wishlist</a> -->
</div>
</div>
</div>
<ul class="nav nav product-tab mt-70 mb-30" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<li><a href="#details" data-bs-toggle="tab" class="active show">Course Overview<i class="far fa-arrow-right"></i></a></li>
<li><a href="#information" data-bs-toggle="tab">What to Expect<i class="far fa-arrow-right"></i></a></li>
<li><a href="#reviews" data-bs-toggle="tab"> Reviews <i class="far fa-arrow-right"></i></a></li>
</ul>
<div class="tab-content" data-aos="fade-up" data-aos-delay="50" data-aos-duration="1500" data-aos-offset="50">
<div class="tab-pane fade active show" id="details">
<div class="container my-5">
<h5>The course introduces and guides participants in the following:</h5>
<ul >
<li>Correct selection, size and purchase of equipment such as Shackles, Slings, Chains and Snatch Blocks.</li>
<li>Correct selection of Pull Straps and Kinetic Straps.</li>
<li>Importance of Safety Slings, Safety Blankets and the correct use of Bridles.</li>
<li>
Importance of secondary equipment such as:</li>
<ul>
<li>Puncture Repair Kits</li>
<li>Tyre Pressure Gauges</li>
<li>Compressors</li>
<li>Fire Extinguishers</li>
</ul>
</ul>
<h5>The day also covers the practical instruction in the following:</h5>
<ul class="list-unstyled ms-4" style="list-style-type: disc;">
<li>Use of Pull straps and Kinetic Straps</li>
<li>Recovery Points and their importance.</li>
<li>Jacking of vehicles OEM, High Lift, Bottle Jacks and Scissor Jacks.</li>
<li>Correct use of Winches including the accessories.</li>
</ul>
<h5>The day culminates with an impressive demonstration of a kinetic strap failure and the repercussion.</h5>
<p><strong>PLEASE NOTE </strong>- <i>Recovery equipment is provided for use by participants during the course. If you already have your own equipment, you are welcome to make use of it during training.</i></p>
<p>Please bring your own lunch and refreshments, sun hats and sunblock.</p>
</div>
<div class="row gap-50 pt-25 pb-20 align-items-center">
<div class="col-lg-7 pt-15">
<h5>What this course includes</h5>
<ul class="list-style-two mt-25">
<li>Rescue & Recovery Manual.</li>
<li>Theory session and discussion.</li>
<li>Spend the afternoon practicing common techniques of advanced rescue and recovery.</li>
</ul>
</div>
<div class="col-lg-5">
<div class="image rmt-45">
<img src="assets/images/drivertraining/04.jpg" alt="Product Details">
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="information">
<!-- <p>Circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses</p> -->
<ul class="list-style-two my-35">
<li>Coffee and Welcome: Kick off the day with a warm coffee, meet your instructors, and receive an overview of the course schedule</li>
<li>Theory Session: Dive into the key principles of off-road driving, including vehicle mechanics, terrain navigation, recovery methods, and safety protocols.</li>
<li>Practical Demonstrations: Watch live demonstrations covering vital techniques like gear selection, adjusting tire pressure, and setting up recovery equipment.</li>
<li>Lunch Break: Enjoy a packed lunch or bring something to braai. Fires will be provided for an authentic outdoor experience.</li>
<li>Track Driving and Practical Training: Test your skills with hands-on driving exercises on a custom-built off-road track, learning how to tackle different obstacles and terrain challenges.</li>
<li>Debrief and Certificates: Conclude the day with a review of your progress, feedback from the instructors, and certificates of completion for your off-road training.</li>
</ul>
</div>
<div class="tab-pane fade mb-20" id="reviews">
<?php include_once('review_box.php'); ?>
</div>
</div>
</div>
</section>
<!-- Shop Details Area end -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
const indemnityBox = document.getElementById('indemnityBox');
const agreeCheckbox = document.getElementById('agreeCheckbox');
const bookingForm = document.querySelector('form');
indemnityBox.addEventListener('scroll', function() {
const scrollTop = indemnityBox.scrollTop;
const scrollHeight = indemnityBox.scrollHeight;
const offsetHeight = indemnityBox.offsetHeight;
// Enable checkbox when scrolled to bottom
if (scrollTop + offsetHeight >= scrollHeight - 1) {
agreeCheckbox.disabled = false;
document.getElementById('agreeLabel').style.color = "#000"; // optional: make label active
}
});
bookingForm.addEventListener('submit', function(e) {
if (agreeCheckbox.disabled || !agreeCheckbox.checked) {
alert('Please read and agree to the indemnity terms before booking.');
e.preventDefault(); // stop form submission
}
});
</script>
<script>
$(document).ready(function() {
// Function to calculate booking total
function calculateTotal() {
// Get selected values from the form
var members = parseInt($('#members').val()) || 0; // Default to 1 vehicle if not selected
var nonmembers = parseInt($('#non-members').val()) || 0; // Default to 1 adult if not selected
// Fetch PHP variables
var isMember = <?php echo $is_member ? 'true' : 'false'; ?>;
var pendingMember = <?php echo $pending_member ? 'true' : 'false'; ?>;
var cost_members = <?= getPrice('rescue_recovery', 'member'); ?>;
var cost_nonmembers = <?= getPrice('rescue_recovery', 'nonmember'); ?>;
// Calculate the total cost based on membership
var total = 0;
// Calculate cost for members
if (isMember || pendingMember) {
total = (cost_members) + (members * cost_members) + (nonmembers * cost_nonmembers);
} else {
// Calculate cost for non-members
total = (cost_nonmembers) + (members * cost_members) + (nonmembers * cost_nonmembers);
}
// Update total price in the DOM
$('#booking_total').text('R ' + total.toFixed(2));
}
// Event listeners to trigger recalculation when any form field changes
$('#members, #non-members').on('change', function() {
calculateTotal();
});
// Initial calculation on page load
calculateTotal();
});
</script>
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php') ?>
+152
View File
@@ -0,0 +1,152 @@
<?php
if (!isset($page_id)) {
die("Page ID not set for comment system.");
}
$conn = openDatabaseConnection();
// Handle comment post
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit_comment'])) {
$comment = $conn->real_escape_string(trim($_POST['comment']));
if (!empty($comment)) {
$stmt = $conn->prepare("INSERT INTO comments (page_id, user_id, comment) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $page_id, $user_id, $comment);
if ($stmt->execute()) {
header("Location: " . $_SERVER['REQUEST_URI']);
exit;
}
}
}
// Fetch comments
$stmt = $conn->prepare("SELECT user_id, comment, created_at FROM comments WHERE page_id = ? ORDER BY created_at DESC");
$stmt->bind_param("s", $page_id);
$stmt->execute();
$result = $stmt->get_result();
?>
<div>
<h5>Reviews</h5>
<div class="comments my-30">
<?php while ($row = $result->fetch_assoc()): ?>
<div class="comment-body" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<div>
<img class="profile-pic" src="<?= getProfilePic($user_id); ?>" alt="Author">
</div>
<div class="content">
<h6><?= getFullName($row['user_id']); ?></h6>
<?php
if (getUserMemberStatus($row['user_id'])){
echo '<div class="badge badge-primary badge-pill">MEMBER</div>';
}
?>
<em><?= $row['created_at'] ?></em>
<!-- <div class="ratting">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div> -->
<p><?= nl2br(htmlspecialchars($row['comment'])) ?></p>
<!-- <a class="read-more" href="#">Reply <i class="far fa-angle-right"></i></a> -->
</div>
</div>
<?php endwhile; ?>
</div>
<h5>Add A Review</h5>
<form method="POST" id="comment-form" class="comment-form bgc-lighter z-1 rel mt-30" name="review-form" action="" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<div class="row gap-20">
<div class="col-md-12">
<div class="form-group">
<textarea name="comment" id="comment" class="form-control" rows="5" placeholder="Add review..." required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group mb-0">
<button type="submit" name="submit_comment" class="theme-btn bgc-secondary style-two">
<span data-hover="Submit reviews">Submit review</span>
<i class="fal fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</form>
</div>
<style>
.comment-box {
border: 1px solid #ccc;
padding: 10px;
max-width: 600px;
}
.comment-box form input,
.comment-box form textarea {
width: 100%;
margin-bottom: 8px;
}
.comments-list {
margin-top: 20px;
}
.comment {
border-top: 1px solid #eee;
padding-top: 10px;
margin-top: 10px;
}
.profile-pic {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
object-fit: cover;
/* Ensures the image fits without distortion */
}
.badge {
display: inline-block;
padding: 0.4em 0.8em;
font-size: 0.875rem;
font-weight: 600;
color: white;
border-radius: 0.375em;
margin-right: 0.5em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-primary {
background-color: #e90000;
}
.badge-success {
background-color: #28a745;
}
.badge-warning {
background-color: #ffc107;
color: #212529;
}
.badge-danger {
background-color: #dc3545;
}
.badge-info {
background-color: #17a2b8;
}
.badge-pill {
border-radius: 999px;
}
</style>
+104
View File
@@ -0,0 +1,104 @@
<?php
$headerStyle = 'light';
include_once(dirname(dirname(dirname(__DIR__))) . '/header.php');
// Assuming you have the user ID stored in the session
if (isset($_SESSION['user_id'])) {
$user_id = $_SESSION['user_id'];
} else {
header('Location: login.php');
exit(); // Stop further script execution
}
?>
<style>
h2 {
text-align: center;
margin-bottom: 20px;
}
.indemnitycontainer {
max-width: 800px;
margin: 0 auto;
}
.indemnity-text {
text-align: justify;
margin-bottom: 20px;
}
.signature-container {
margin-top: 30px;
margin-bottom: 100px;
text-align: center;
}
#signature-pad {
border: 1px solid black;
}
</style>
<!-- Page Banner Start -->
<?php
$bannerFolder = 'assets/images/banners/';
$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
if (!empty($bannerImages)) {
$randomBanner = $bannerImages[array_rand($bannerImages)];
}
?>
<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
<div class="container">
<div class="banner-inner text-white">
<h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">Indemnity</h2>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
<li class="breadcrumb-item"><a href="index">Home</a></li>
<li class="breadcrumb-item ">Membership</li>
<li class="breadcrumb-item active">Indemnity</li>
</ol>
</nav>
</div>
</div>
</section>
<!-- Page Banner End -->
<div class="indemnitycontainer pt-20">
<!-- <h2>Indemnity and Waiver</h2> -->
<div class="indemnity-text">
<p><strong>INDEMNITY AND WAIVER</strong></p>
<p>1. I agree to abide by the Code of Conduct as listed below, as well as any reasonable instructions given by any Member of the Committee of the Club, or any person appointed by the Club to organise or control any event (Club Officer).</p>
<p>2. I acknowledge that driving the off-road track is inherently dangerous, and that I am fully aware of the dangers thereof. I warrant that I will make all members of my party aware of such dangers prior to driving the track.</p>
<p>3. While I, or any member of my party, enjoy the facilities at Base 4 including overnight camping, picnicking, driving the track, using the swimming pool facility or activity or any other activity while at Base 4, I agree that under no circumstances shall the Club be liable for any loss or damage of any kind whatsoever (including consequential loss) which I or any of my party may suffer, regardless of how such loss or damage may have been caused or sustained, and whether or not as a result of the negligence or breach of contract (whether fundamental or otherwise) or other wrongful act of the Club, or any Club Officer, or any of the Clubs agents or contractors, and I hereby indemnify and hold harmless the Club and any Club Officer against all such loss or damage.</p>
<p>4. The expression, member of my party, means all persons who accompany me or attending any event at my specific invitation, request or suggestion, and includes without limitation, members of family, guests and invitees.</p>
<p>5. I understand that I am responsible for ensuring my vehicle and equipment and that all members of my party have adequate health and medical insurance to cover any and all likely occurrences.</p>
<p>6. This indemnity is irrevocable and shall apply to me and the members of my party for any Club events in which I may participate or attend.</p>
<p><strong>BASE 4 CODE OF CONDUCT</strong></p>
<p>1. No motorbikes or quadbikes.</p>
<p>2. No loud music (unless authorised by the Committee or its representatives).</p>
<p>3. Dogs to be controlled by their owners who take full responsibility for the animals behaviour.</p>
<p>4. No dogs belonging to non-members are allowed at Base 4 unless with the express permission of the Committee.</p>
<p>5. No person in the rear of open vehicles when driving on obstacles.</p>
<p>6. When driving the obstacles stay on the tracks.</p>
<p>7. Engage 4WD when driving the obstacles to minimise wear and damage to the track.</p>
<p>8. No alcohol to be consumed while driving the track.</p>
<p>9. No littering (please pick up cigarette butts etc.)</p>
<p>10. All rubbish is to be taken away with you when leaving. Dustbins and refuse collection is not provided.</p>
<p>11. Use water sparingly. Please bring your own water and a little extra for the Club.</p>
<p>I am a member of the Four Wheel Drive Club of Southern Africa and I will strive to uphold these Codes.</p>
</div>
<div class="signature-container">
<div style="text-align: center;" id="responseMessage"></div> <!-- Message display area -->
<p><strong>Signature</strong></p>
<img src="uploads/signatures/signature_<?php echo $user_id;?>.png" alt="Signature" width="200">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php') ?>