cce181e2d0
- Created new track-map page with aerial image and SVG overlay - Implemented custom rotated square markers with obstacle numbers - Added admin edit mode for placing and repositioning markers - Database migration for track_obstacles table - Modal form for adding new obstacles (replaces browser alerts) - Drag-to-reposition functionality with auto-save - Color-coded markers (green/red/black/split) for difficulty levels - Clickable popups showing obstacle details - Added track-map to navigation menu and sitemap - URL rewrite rule for clean /track-map URL
853 lines
39 KiB
PHP
853 lines
39 KiB
PHP
<?php
|
|
$rootPath = dirname(__FILE__);
|
|
$headerStyle = 'dark';
|
|
include_once($rootPath . '/header.php');
|
|
$indemnityPending = false;
|
|
|
|
// Set session flag for updates modal - only show once per session and before Jan 1, 2026
|
|
if (!isset($_SESSION['updates_modal_shown'])) {
|
|
$currentDate = new DateTime();
|
|
$endDate = new DateTime('2026-01-01');
|
|
|
|
if ($currentDate < $endDate) {
|
|
$_SESSION['updates_modal_shown'] = true;
|
|
$showUpdatesModal = true;
|
|
} else {
|
|
$showUpdatesModal = false;
|
|
}
|
|
} else {
|
|
$showUpdatesModal = false;
|
|
}
|
|
|
|
if (isset($_SESSION['user_id']) && isset($conn) && $conn !== null) {
|
|
$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.php" 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
|
|
if (isset($conn) && $conn !== null) {
|
|
$stmt = $conn->prepare("SELECT trip_id, trip_name, location, short_description, start_date, end_date, vehicle_capacity, cost_members, places_booked
|
|
FROM trips
|
|
WHERE published = ?
|
|
ORDER BY trip_id DESC
|
|
LIMIT 4");
|
|
$published = 1;
|
|
$stmt->bind_param("i", $published);
|
|
$stmt->execute();
|
|
$result = $stmt->get_result();
|
|
|
|
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?token=' . encryptData($trip_id, $salt) . '">' . $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?token=' . encryptData($trip_id, $salt) . '" class="read-more">Book Now <i class="fal fa-angle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>';
|
|
}
|
|
} else {
|
|
echo "No trips available.";
|
|
}
|
|
} // end if (isset($conn) && $conn !== null)
|
|
?>
|
|
|
|
</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>Join the adventure—sign up now to explore epic trails, exclusive trips, and a community that lives for the off-road!</p>
|
|
|
|
<a href="membership.php" 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.php" 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>
|
|
|
|
<!-- 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>
|
|
</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.php">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.php" 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.php">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.php" 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.php">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.php" 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>
|
|
</section>
|
|
<!-- Hotel 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
|
|
$result = $conn->prepare("
|
|
SELECT
|
|
b.blog_id,
|
|
b.title,
|
|
b.description,
|
|
b.category,
|
|
b.status,
|
|
b.date,
|
|
b.image,
|
|
b.members_only,
|
|
CONCAT(u.first_name, ' ', u.last_name) AS author_name,
|
|
u.email AS author_email,
|
|
u.profile_pic
|
|
FROM blogs b
|
|
JOIN users u ON b.author = u.user_id
|
|
WHERE b.status = 'published'
|
|
ORDER BY b.date DESC
|
|
");
|
|
|
|
$result->execute();
|
|
$posts = $result->get_result();
|
|
|
|
if ($posts->num_rows > 0) {
|
|
// Loop through each row
|
|
while ($post = $posts->fetch_assoc()):
|
|
$blog_id = $post['blog_id'];
|
|
$blog_title = $post['title'];
|
|
$blog_date = $post['date'];
|
|
$blog_category = $post['category'];
|
|
$blog_image = $post['image'];
|
|
$blog_description = $post['description'];
|
|
$members_only = $post['members_only'];
|
|
if ($members_only) {
|
|
if (!isset($_SESSION['user_id'])) {
|
|
$blog_link = "login";
|
|
$button_hover = "Members Only";
|
|
$icon = "fa-lock";
|
|
} else {
|
|
if (getUserMemberStatus($_SESSION['user_id'])) {
|
|
$blog_link = "blog_read?token=" . encryptData($blog_id, $salt);
|
|
$button_hover = "Read More";
|
|
$icon = "fa-arrow-right";
|
|
} else {
|
|
$blog_link = "membership";
|
|
$button_hover = "Members Only";
|
|
$icon = "fa-lock";
|
|
}
|
|
}
|
|
} else {
|
|
$blog_link = "blog_read?token=" . encryptData($blog_id, $salt);
|
|
$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" style="width:100%;">
|
|
|
|
<div class="destination-header d-flex align-items-start gap-3">
|
|
|
|
<img src="' . $post["profile_pic"] . '" alt="Author" class="rounded-circle border" width="60" height="60">
|
|
<div>
|
|
<span class="badge bg-dark mb-1">' . strtoupper($post["category"]) . '</span>
|
|
<h5 class="mb-0">' . $post["title"] . '</h5>
|
|
<small class="text-muted">' . $post["author_name"] . '</small>
|
|
</div>
|
|
</div>
|
|
<p style="max-height: 60px; overflow: hidden;">' . $post["description"] . '</p>
|
|
</div>
|
|
<div class="image">
|
|
<img style="aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius:20px; width: 100%; display: block;" src="' . $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>';
|
|
endwhile;
|
|
} else {
|
|
echo "<p>No blog posts available.</p>";
|
|
}
|
|
|
|
?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Blog Area end -->
|
|
|
|
|
|
<!-- 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&id=3c370893eb&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>
|
|
</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.php">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.php" 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);
|
|
|
|
// Show updates modal on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const modal = document.getElementById('updatesModal');
|
|
const closeBtn = document.querySelector('.updates-modal-close');
|
|
const showModal = <?php echo $showUpdatesModal ? 'true' : 'false'; ?>;
|
|
|
|
if (showModal) {
|
|
// Show modal after a short delay for better UX
|
|
setTimeout(function() {
|
|
modal.style.display = 'flex';
|
|
}, 500);
|
|
}
|
|
|
|
// Close modal when X is clicked
|
|
closeBtn.addEventListener('click', function() {
|
|
modal.style.display = 'none';
|
|
});
|
|
|
|
// Close modal when clicking outside the modal content
|
|
modal.addEventListener('click', function(event) {
|
|
if (event.target === modal) {
|
|
modal.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Updates Modal -->
|
|
<div id="updatesModal" class="updates-modal">
|
|
<div class="updates-modal-content">
|
|
<span class="updates-modal-close">×</span>
|
|
<div class="updates-modal-header">
|
|
<h2>✨ What's New</h2>
|
|
</div>
|
|
<div class="updates-modal-body">
|
|
<div class="update-item">
|
|
<h3><i class="fas fa-images" style="margin-right: 10px; color: #e90000;"></i>Track Map</h3>
|
|
<p>Interactive map of the BASE4 4x4 Training Track.</p>
|
|
</div>
|
|
<div class="update-item">
|
|
<h3><i class="fas fa-images" style="margin-right: 10px; color: #e90000;"></i>Photo Gallery</h3>
|
|
<p>Explore and share memories from club events and trips. Members can now upload and view photos from past adventures.</p>
|
|
</div>
|
|
<div class="update-item">
|
|
<h3><i class="fas fa-map-location-dot" style="margin-right: 10px; color: #e90000;"></i>Campsites Directory</h3>
|
|
<p>Discover recommended campsites and accommodation options for your next adventure. Browse detailed information and member reviews.</p>
|
|
</div>
|
|
<div class="update-item">
|
|
<h3><i class="fas fa-users" style="margin-right: 10px; color: #e90000;"></i>Linked Membership</h3>
|
|
<p>Link a second user to your profile so both can book trips and receive member benefits together.</p>
|
|
</div>
|
|
<div class="update-item">
|
|
<h3><i class="fas fa-pen-fancy" style="margin-right: 10px; color: #e90000;"></i>Blog Posts</h3>
|
|
<p>Members can now post blogs, reviews, and trip reports to share experiences with the community.</p>
|
|
</div>
|
|
</div>
|
|
<div class="updates-modal-footer">
|
|
<button class="theme-btn style-two updates-modal-btn" onclick="document.getElementById('updatesModal').style.display='none'">
|
|
<span>Got It</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.updates-modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.updates-modal-content {
|
|
background-color: white;
|
|
padding: 40px;
|
|
border-radius: 15px;
|
|
max-width: 500px;
|
|
width: 90%;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
|
animation: slideDown 0.3s ease-out;
|
|
position: relative;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
transform: translateY(-50px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.updates-modal-close {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 20px;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #999;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.updates-modal-close:hover {
|
|
color: #e90000;
|
|
}
|
|
|
|
.updates-modal-header {
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.updates-modal-header h2 {
|
|
color: #1c231f;
|
|
font-size: 28px;
|
|
margin: 0;
|
|
}
|
|
|
|
.updates-modal-body {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.update-item {
|
|
margin-bottom: 25px;
|
|
padding-bottom: 25px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.update-item:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.update-item h3 {
|
|
color: #1c231f;
|
|
font-size: 18px;
|
|
margin: 0 0 10px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.update-item p {
|
|
color: #666;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
.updates-modal-footer {
|
|
text-align: center;
|
|
}
|
|
|
|
.updates-modal-btn {
|
|
padding: 10px 30px !important;
|
|
background-color: #e90000 !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.updates-modal-btn:hover {
|
|
background-color: #c70000 !important;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.updates-modal-content {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.updates-modal-header h2 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.update-item h3 {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
</body>
|
|
|
|
</html>
|