Files
4WDCSA.co.za/index.php
twotalesanimation be2b757f4e Code restructure push
2025-12-04 15:09:44 +02:00

620 lines
32 KiB
PHP

<?php
$headerStyle = 'dark';
include_once('header.php');
$indemnityPending = 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
$sql = "SELECT blog_id, title, date, category, image, description, author, link, members_only FROM blogs WHERE status = 'published' 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 -->
<!-- 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>
</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);
</script>
</body>
</html>