Initial commit

events.php

@@ -0,0 +1,128 @@
+<?php include_once('header02.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
+$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="banner-overlay"></div>
+    <div class="container">
+        <div class="banner-inner text-white mb-50">
+            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">4WDCSA events</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.php">Home</a></li>
+                    <li class="breadcrumb-item active">4WDCSA Events</li>
+                </ol>
+            </nav>
+        </div>
+    </div>
+</section>
+
+<!-- Tour List Area start -->
+<section class="tour-list-page py-100 rel z-1">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-lg-12">
+                <div class="shop-shorter rel z-3 mb-20">
+                    <!-- <ul class="grid-list mb-15 me-2">
+                        <li><a href="#"><i class="fal fa-border-all"></i></a></li>
+                        <li><a href="#"><i class="far fa-list"></i></a></li>
+                    </ul>
+                    <div class="sort-text mb-15 me-4 me-xl-auto">
+                    </div> -->
+                    <div class="sort-text mb-15 me-4">
+                        Sort By
+                    </div>
+                    <select>
+                        <option value="default" selected="">Sort By</option>
+                        <option value="new">Newness</option>
+                        <option value="old">Oldest</option>
+                        <option value="hight-to-low">High To Low</option>
+                        <option value="low-to-high">Low To High</option>
+                    </select>
+                </div>
+                
+                <?php
+                // Query to retrieve data from the trips table
+                $sql = "SELECT event_id, date, time, name, image, description, feature, location, type FROM events WHERE date > CURDATE()";
+
+                $result = $conn->query($sql);
+
+                if ($result->num_rows > 0) {
+                    // Loop through each row
+                    while ($row = $result->fetch_assoc()) {
+                        $event_id = $row['event_id'];
+                        $date = $row['date'];
+                        $time = $row['time'];
+                        $name = $row['name'];
+                        $image = $row['image'];
+                        $description = $row['description'];
+                        $feature = $row['feature'];
+                        $location = $row['location'];
+                        $type = $row['type'];
+
+                        // Determine the badge text based on the status
+                        $badge_text = 'OPEN DAY';
+
+                        // Output the HTML structure with dynamic data
+                        echo '
+        <div class="destination-item style-three bgc-lighter" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
+            <div class="image">
+                <img src="' . $image . '" alt="' . $name . '">
+            </div>
+            <div class="content">
+                <div class="destination-header">
+                    <span class="location"><i class="fal fa-map-marker-alt"></i> ' . $location . '</span>
+                </div>
+                <h5>' . $name . '</a></h5>
+                <p>' . $feature . '</p>
+                <p>' . $description . '</p>
+                <ul class="blog-meta">
+                    <li><i class="far fa-calendar"></i> ' . convertDate($date) . '</li>
+                    <li><i class="far fa-clock"></i> '.$time.'</li>
+                </ul>                
+            </div>
+        </div>';
+                    }
+                } else {
+                    echo "No events available.";
+                }
+
+                // Close connection
+                $conn->close();
+                ?>
+
+                
+            </div>
+        </div>
+    </div>
+</section>
+<!-- Tour List Area end -->
+
+
+<?php include_once("insta_footer.php"); ?>