326 lines
16 KiB
PHP
326 lines
16 KiB
PHP
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<?php include('container/links.php'); ?>
|
||
|
|
<style>
|
||
|
|
.active a {
|
||
|
|
background-color: var(--thm-gradient-color2) !important;
|
||
|
|
color: white !important;
|
||
|
|
}
|
||
|
|
#total-products{
|
||
|
|
text:center;
|
||
|
|
display: inline-block;
|
||
|
|
width:150px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="body-bg-color">
|
||
|
|
<!-- Header -->
|
||
|
|
<?php include 'container/header.php'; ?>
|
||
|
|
|
||
|
|
<?php
|
||
|
|
// Database security setup
|
||
|
|
$added_by = $_SESSION['user_id'] ?? null;
|
||
|
|
|
||
|
|
// Get data from database safely
|
||
|
|
$query = "SELECT * FROM products_cms LIMIT 1";
|
||
|
|
$result = mysqli_query($conn, $query);
|
||
|
|
if (!$result) {
|
||
|
|
echo "<script> window.location.href = '404';</script>";
|
||
|
|
exit();
|
||
|
|
}
|
||
|
|
|
||
|
|
$data = mysqli_fetch_assoc($result);
|
||
|
|
|
||
|
|
// Check if data is available
|
||
|
|
$small_heading_EN = isset($data['small_heading_EN']) ? htmlspecialchars($data['small_heading_EN'], ENT_QUOTES, 'UTF-8') : '';
|
||
|
|
$small_heading_CN = isset($data['small_heading_CN']) ? htmlspecialchars($data['small_heading_CN'], ENT_QUOTES, 'UTF-8') : '';
|
||
|
|
$large_heading_EN = isset($data['large_heading_EN']) ? htmlspecialchars($data['large_heading_EN'], ENT_QUOTES, 'UTF-8') : '';
|
||
|
|
$large_heading_CN = isset($data['large_heading_CN']) ? htmlspecialchars($data['large_heading_CN'], ENT_QUOTES, 'UTF-8') : '';
|
||
|
|
$long_description_EN = isset($data['long_description_EN']) ? htmlspecialchars($data['long_description_EN'], ENT_QUOTES, 'UTF-8') : '';
|
||
|
|
$long_description_CN = isset($data['long_description_CN']) ? htmlspecialchars($data['long_description_CN'], ENT_QUOTES, 'UTF-8') : '';
|
||
|
|
?>
|
||
|
|
<section class="page-title">
|
||
|
|
<div class="container">
|
||
|
|
<div class="page-title__inner">
|
||
|
|
<div class="page-title__shape-1" style="background-image: url(images/shapes/page-title-shape-1.png);"></div>
|
||
|
|
<div class="page-title__title-box">
|
||
|
|
<?php
|
||
|
|
// Get total product count
|
||
|
|
$total_products_query = "SELECT COUNT(*) as total FROM products";
|
||
|
|
$total_products_result = mysqli_query($conn, $total_products_query);
|
||
|
|
$total_products_row = mysqli_fetch_assoc($total_products_result);
|
||
|
|
$total_products = intval($total_products_row['total']);
|
||
|
|
?>
|
||
|
|
|
||
|
|
<p>We have curated <span id="total-products" class="page-title__sub-title" style="color: var(--thm-base); font-size: 48px;">0</span> high-quality <span style="color: var(--thm-base);">AI tools</span> and <span style="color: var(--thm-base);">smart products</span> to help you achieve a more efficient work and lifestyle!</p>
|
||
|
|
|
||
|
|
<!-- Scroll down hint -->
|
||
|
|
<div id="scroll-hint" style="margin-top: 20px; font-size: 18px; color: var(--thm-secondary); text-align: center;">
|
||
|
|
Please start exploring the best tools below
|
||
|
|
<br>
|
||
|
|
<span style="font-size: 30px;">↓</span> <!-- Downward arrow -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<script>
|
||
|
|
document.addEventListener("DOMContentLoaded", function() {
|
||
|
|
var totalProducts = <?php echo $total_products; ?>;
|
||
|
|
var currentCount = 0;
|
||
|
|
var displayElement = document.getElementById("total-products");
|
||
|
|
|
||
|
|
// 递增的速度
|
||
|
|
var intervalSpeed = 0; // 每次递增的间隔时间，单位为毫秒
|
||
|
|
|
||
|
|
function incrementCount() {
|
||
|
|
if (currentCount < totalProducts) {
|
||
|
|
currentCount++;
|
||
|
|
displayElement.textContent = currentCount;
|
||
|
|
} else {
|
||
|
|
clearInterval(interval);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var interval = setInterval(incrementCount, intervalSpeed);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<section class="case-one">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<div class="top_search_form">
|
||
|
|
<div class="search-container">
|
||
|
|
<form id="search-form" action="search_results.php" method="get">
|
||
|
|
<input type="text" id="search-input" name="query" placeholder="Search for products..." autocomplete="off">
|
||
|
|
<button class="s_btn" type="submit">Search</button>
|
||
|
|
<ul id="suggestions" class="suggestions-list"></ul>
|
||
|
|
</form>
|
||
|
|
<div class="career-page-top__job-apply-country-list" id="form_tags">
|
||
|
|
<?php
|
||
|
|
// Get the filter parameter from the URL, default to 'all'
|
||
|
|
$filter = isset($_GET['filter']) ? $_GET['filter'] : 'all';
|
||
|
|
|
||
|
|
// Display the "All" link with the active class if filter is 'all'
|
||
|
|
echo "<a href='products?filter=all'" . ($filter === 'all' ? " class='cat_active'" : "") . ">All</a>";
|
||
|
|
|
||
|
|
// Query to fetch up to 6 categories from the database
|
||
|
|
$query = "SELECT * FROM categories LIMIT 6";
|
||
|
|
$result = mysqli_query($conn, $query);
|
||
|
|
|
||
|
|
if ($result) {
|
||
|
|
while ($row = mysqli_fetch_assoc($result)) {
|
||
|
|
$active_class = ($filter === $row['c_name']) ? " class='cat_active'" : "";
|
||
|
|
echo "<a href='products?filter=" . urlencode($row['c_name']) . "'" . $active_class . ">" . htmlspecialchars($row['c_name'], ENT_QUOTES, 'UTF-8') . "</a>";
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
echo "<script> window.location.href = '404';</script>";
|
||
|
|
exit();
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<?php
|
||
|
|
// Number of products to display per page
|
||
|
|
$products_per_page = 36;
|
||
|
|
|
||
|
|
// Get the current page number from the URL, default is 1
|
||
|
|
$current_page = isset($_GET['page']) && is_numeric($_GET['page']) ? intval($_GET['page']) : 1;
|
||
|
|
if ($current_page <= 0) {
|
||
|
|
echo "<script> window.location.href = '404';</script>";
|
||
|
|
exit();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Calculate the offset for the SQL query
|
||
|
|
$offset = ($current_page - 1) * $products_per_page;
|
||
|
|
|
||
|
|
// Fetch total number of products based on the filter
|
||
|
|
if ($filter === 'all' || empty($filter)) {
|
||
|
|
// If filter is 'all' or not provided, count all products
|
||
|
|
$total_products_query = "SELECT COUNT(*) as total FROM products";
|
||
|
|
} else {
|
||
|
|
// If filter is set to a specific category, count only the products in that category
|
||
|
|
$total_products_query = "
|
||
|
|
SELECT COUNT(*) as total
|
||
|
|
FROM products p
|
||
|
|
JOIN categories c ON p.category_id = c.id
|
||
|
|
WHERE c.c_name = '" . mysqli_real_escape_string($conn, $filter) . "'";
|
||
|
|
}
|
||
|
|
|
||
|
|
$total_products_result = mysqli_query($conn, $total_products_query);
|
||
|
|
if (!$total_products_result) {
|
||
|
|
echo "<script> window.location.href = '404';</script>";
|
||
|
|
exit();
|
||
|
|
}
|
||
|
|
|
||
|
|
$total_products_row = mysqli_fetch_assoc($total_products_result);
|
||
|
|
$total_products = intval($total_products_row['total']);
|
||
|
|
|
||
|
|
// Fetch the products for the current page based on the filter
|
||
|
|
if ($filter === 'all' || empty($filter)) {
|
||
|
|
$products_query = "SELECT * FROM products ORDER BY id DESC LIMIT $offset, $products_per_page";
|
||
|
|
} else {
|
||
|
|
$products_query = "
|
||
|
|
SELECT p.*
|
||
|
|
FROM products p
|
||
|
|
JOIN categories c ON p.category_id = c.id
|
||
|
|
WHERE c.c_name = '" . mysqli_real_escape_string($conn, $filter) . "'
|
||
|
|
ORDER BY p.id DESC
|
||
|
|
LIMIT $offset, $products_per_page";
|
||
|
|
}
|
||
|
|
|
||
|
|
$products_result = mysqli_query($conn, $products_query);
|
||
|
|
if (!$products_result) {
|
||
|
|
echo "<script> window.location.href = '404';</script>";
|
||
|
|
exit();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mysqli_num_rows($products_result) > 0) {
|
||
|
|
while ($product = mysqli_fetch_assoc($products_result)) {
|
||
|
|
?>
|
||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp animated" data-wow-delay="200ms" style="visibility: visible; animation-delay: 200ms; animation-name: fadeInUp;">
|
||
|
|
<div class="case-one__single">
|
||
|
|
<div class="case-one__shape-1"></div>
|
||
|
|
<div class="case-one__icon">
|
||
|
|
<img class="case-one_img" src="../cms_admin/<?php echo htmlspecialchars($product['icon'], ENT_QUOTES, 'UTF-8'); ?>" height="90px" alt="<?php echo htmlspecialchars($product['title'], ENT_QUOTES, 'UTF-8'); ?>">
|
||
|
|
</div>
|
||
|
|
<h5 class="case-one__title"><a href="product_details?id=<?php echo htmlspecialchars($product['id'], ENT_QUOTES, 'UTF-8'); ?>" target="_blank"><?php echo htmlspecialchars($product['title'], ENT_QUOTES, 'UTF-8'); ?></a></h5>
|
||
|
|
<p class="case-one__text"><?php echo htmlspecialchars($product['short_description'], ENT_QUOTES, 'UTF-8'); ?></p>
|
||
|
|
<div class="case-one__btn-box">
|
||
|
|
<a href="product_details?id=<?php echo htmlspecialchars($product['id'], ENT_QUOTES, 'UTF-8'); ?>" class="case-one__btn" target="_blank">Get Started <span class="icon-up-right-arrow"></span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<?php
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
echo "<p>No products available.</p>";
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Pagination HTML -->
|
||
|
|
<div class="career-page__pagination mt-5">
|
||
|
|
<ul class="pg-pagination list-unstyled">
|
||
|
|
<?php
|
||
|
|
// Determine total pages
|
||
|
|
$total_pages = ceil($total_products / $products_per_page);
|
||
|
|
|
||
|
|
// Construct the base URL with the filter parameter
|
||
|
|
$base_url = "?filter=" . urlencode($filter) . "&page=";
|
||
|
|
|
||
|
|
// "Previous" button
|
||
|
|
if ($current_page > 1): ?>
|
||
|
|
<li class="prev">
|
||
|
|
<a href="<?php echo $base_url . ($current_page - 1); ?>" aria-label="Previous">
|
||
|
|
<span class="fas fa-arrow-left"></span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<?php endif;
|
||
|
|
|
||
|
|
// If total pages <= 6, show all page numbers
|
||
|
|
if ($total_pages <= 6):
|
||
|
|
for ($page = 1; $page <= $total_pages; $page++): ?>
|
||
|
|
<li class="count <?php echo $page == $current_page ? 'active' : ''; ?>" style="<?php echo $page == $current_page ? 'background-color: var(--thm-gradient-color2); color: white;' : ''; ?>">
|
||
|
|
<a href="<?php echo $base_url . $page; ?>"><?php echo $page; ?></a>
|
||
|
|
</li>
|
||
|
|
<?php endfor;
|
||
|
|
else:
|
||
|
|
// Show the first 3 pages
|
||
|
|
for ($page = 1; $page <= 3; $page++): ?>
|
||
|
|
<li class="count <?php echo $page == $current_page ? 'active' : ''; ?>" style="<?php echo $page == $current_page ? 'background-color: var(--thm-gradient-color2); color: white;' : ''; ?>">
|
||
|
|
<a href="<?php echo $base_url . $page; ?>"><?php echo $page; ?></a>
|
||
|
|
</li>
|
||
|
|
<?php endfor;
|
||
|
|
|
||
|
|
// Show ellipsis (...) if needed
|
||
|
|
if ($current_page > 5): ?>
|
||
|
|
<li class="dots">...</li>
|
||
|
|
<?php endif;
|
||
|
|
|
||
|
|
// Show the current page +/- 2 pages
|
||
|
|
for ($page = max(4, $current_page - 2); $page <= min($total_pages - 3, $current_page + 2); $page++): ?>
|
||
|
|
<li class="count <?php echo $page == $current_page ? 'active' : ''; ?>" style="<?php echo $page == $current_page ? 'background-color: var(--thm-gradient-color2); color: white;' : ''; ?>">
|
||
|
|
<a href="<?php echo $base_url . $page; ?>"><?php echo $page; ?></a>
|
||
|
|
</li>
|
||
|
|
<?php endfor;
|
||
|
|
|
||
|
|
// Show ellipsis (...) if needed
|
||
|
|
if ($current_page < $total_pages - 4): ?>
|
||
|
|
<li class="dots">...</li>
|
||
|
|
<?php endif;
|
||
|
|
|
||
|
|
// Show the last 3 pages
|
||
|
|
for ($page = max($total_pages - 2, $current_page + 3); $page <= $total_pages; $page++): ?>
|
||
|
|
<li class="count <?php echo $page == $current_page ? 'active' : ''; ?>" style="<?php echo $page == $current_page ? 'background-color: var(--thm-gradient-color2); color: white;' : ''; ?>">
|
||
|
|
<a href="<?php echo $base_url . $page; ?>"><?php echo $page; ?></a>
|
||
|
|
</li>
|
||
|
|
<?php endfor;
|
||
|
|
endif;
|
||
|
|
|
||
|
|
// "Next" button
|
||
|
|
if ($current_page < $total_pages): ?>
|
||
|
|
<li class="next">
|
||
|
|
<a href="<?php echo $base_url . ($current_page + 1); ?>" aria-label="Next">
|
||
|
|
<span class="fas fa-arrow-right"></span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<?php endif; ?>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<?php include 'container/footer.php'; ?>
|
||
|
|
<?php include 'container/footer_links.php'; ?>
|
||
|
|
|
||
|
|
<!-- JavaScript for Handling Suggestions -->
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const searchInput = document.getElementById('search-input');
|
||
|
|
const suggestionsList = document.getElementById('suggestions');
|
||
|
|
const searchForm = document.getElementById('search-form');
|
||
|
|
|
||
|
|
searchInput.addEventListener('input', function() {
|
||
|
|
const query = searchInput.value.trim();
|
||
|
|
|
||
|
|
if (query.length > 0) {
|
||
|
|
fetch('search_suggestions.php?query=' + encodeURIComponent(query))
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
suggestionsList.innerHTML = '';
|
||
|
|
data.suggestions.forEach(item => {
|
||
|
|
const li = document.createElement('li');
|
||
|
|
li.textContent = item.title;
|
||
|
|
li.dataset.url = item.url;
|
||
|
|
li.addEventListener('click', function() {
|
||
|
|
window.location.href = li.dataset.url;
|
||
|
|
});
|
||
|
|
suggestionsList.appendChild(li);
|
||
|
|
});
|
||
|
|
suggestionsList.style.display = 'block';
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
suggestionsList.innerHTML = '';
|
||
|
|
suggestionsList.style.display = 'none';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener('click', function(event) {
|
||
|
|
if (!searchForm.contains(event.target)) {
|
||
|
|
suggestionsList.style.display = 'none';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|