Code restructure push
This commit is contained in:
twotalesanimation
196
src/pages/events/events.php
Normal file
196
src/pages/events/events.php
Normal file
@@ -0,0 +1,196 @@
|
||||
<?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 */
|
||||
}
|
||||
|
||||
.custom-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.custom-modal-content {
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-modal-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<?php
|
||||
$pageTitle = 'Events';
|
||||
$breadcrumbs = [['Home' => 'index.php']];
|
||||
require_once($rootPath . '/components/banner.php');
|
||||
?>
|
||||
|
||||
<!-- 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 upcoming events
|
||||
$stmt = $conn->prepare("SELECT event_id, date, time, name, image, description, feature, location, type, promo FROM events WHERE date > CURDATE() ORDER BY date ASC");
|
||||
$stmt->execute();
|
||||
$result = $stmt->get_result();
|
||||
|
||||
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'];
|
||||
$promo = $row['promo'];
|
||||
|
||||
// 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>
|
||||
<button type="button" class="theme-btn style-three view-image-btn" style="padding: 2px 20px"
|
||||
data-image-src="' . $promo . '"
|
||||
data-image-title="' . htmlspecialchars($name, ENT_QUOTES) . '">
|
||||
View Promo
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>';
|
||||
}
|
||||
} else {
|
||||
echo "No events available.";
|
||||
}
|
||||
|
||||
// Close connection
|
||||
$conn->close();
|
||||
?>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Tour List Area end -->
|
||||
<!-- Custom Image Modal -->
|
||||
<div id="customImageModal" class="custom-modal">
|
||||
<div class="custom-modal-content">
|
||||
<span class="custom-modal-close">×</span>
|
||||
<h5 id="modalImageTitle"></h5>
|
||||
<img id="modalImageElement" src="" alt="" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const modal = document.getElementById("customImageModal");
|
||||
const modalImg = document.getElementById("modalImageElement");
|
||||
const modalTitle = document.getElementById("modalImageTitle");
|
||||
const closeBtn = document.querySelector(".custom-modal-close");
|
||||
|
||||
document.querySelectorAll(".view-image-btn").forEach(button => {
|
||||
button.addEventListener("click", () => {
|
||||
const src = button.getAttribute("data-image-src");
|
||||
const title = button.getAttribute("data-image-title");
|
||||
modalImg.src = src;
|
||||
modalTitle.textContent = title;
|
||||
modal.style.display = "block";
|
||||
});
|
||||
});
|
||||
|
||||
closeBtn.addEventListener("click", () => {
|
||||
modal.style.display = "none";
|
||||
modalImg.src = "";
|
||||
});
|
||||
|
||||
// Optional: click outside modal to close
|
||||
window.addEventListener("click", (e) => {
|
||||
if (e.target === modal) {
|
||||
modal.style.display = "none";
|
||||
modalImg.src = "";
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
|
||||
Reference in New Issue
Block a user