308 lines
14 KiB
PHP
308 lines
14 KiB
PHP
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<?php include('../cms_admin/db_connection.php'); ?>
|
||
|
||
<?php
|
||
// Dynamic SEO for the page
|
||
$search_query = isset($_GET['query']) ? mysqli_real_escape_string($conn, $_GET['query']) : '';
|
||
|
||
if (!empty($search_query)) {
|
||
$page_title = "搜索结果：'$search_query' - AI工具导航 | AI Tool Path";
|
||
$page_description = "在AI Tool Path上查找与'$search_query'相关的AI工具和产品。为您提供最全面的AI工具搜索服务。";
|
||
} else {
|
||
$page_title = "搜索AI工具 - AI工具导航 | AI Tool Path";
|
||
$page_description = "使用AI Tool Path搜索和查找最新的AI工具。我们提供全面的AI工具库，帮助您找到最佳的AI解决方案。";
|
||
}
|
||
|
||
echo "<title>$page_title</title>";
|
||
echo "<meta name='description' content='$page_description'>";
|
||
echo "<meta name='keywords' content='AI工具, 人工智能, AI产品, 工具搜索, AI Tool Path, 最佳AI工具'>";
|
||
?>
|
||
|
||
<!-- Styles and other meta tags -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<link href="css/color-switcher-design.css" rel="stylesheet">
|
||
<link id="theme-color-file" href="css/color-themes/default-color.css" rel="stylesheet">
|
||
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
|
||
<link rel="icon" href="images/favicon.png" type="image/x-icon">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||
<link href="css/bootstrap.css" rel="stylesheet">
|
||
<link href="css/style.css" rel="stylesheet">
|
||
<link href="css/responsive.css" rel="stylesheet">
|
||
<meta name="robots" content="index, follow">
|
||
<style>
|
||
.active a {
|
||
background-color: var(--thm-gradient-color2) !important;
|
||
color: white !important;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body class="body-bg-color">
|
||
<!-- Header -->
|
||
<?php include 'container/header.php'; ?>
|
||
|
||
<!-- Page Title Start -->
|
||
<section class="page-title">
|
||
<div class="container">
|
||
<div class="page-title__inner">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Page Title End -->
|
||
|
||
<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="搜索产品..." autocomplete="off" value="<?php echo htmlspecialchars($search_query); ?>">
|
||
<button class="s_btn" type="submit">搜索</button>
|
||
<ul id="suggestions" class="suggestions-list"></ul>
|
||
</form>
|
||
<div class="career-page-top__job-apply-country-list" id="form_tags">
|
||
<?php
|
||
$filter = isset($_GET['filter']) ? htmlspecialchars($_GET['filter']) : 'all';
|
||
|
||
// Display "All" link with active class if filter is 'all'
|
||
echo "<a href='products?filter=all'" . ($filter === 'all' ? " class='cat_active'" : "") . ">全部</a>";
|
||
|
||
// 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['cn_name']) . "</a>";
|
||
}
|
||
}
|
||
?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<?php
|
||
$products_per_page = 36;
|
||
$current_page = isset($_GET['page']) && is_numeric($_GET['page']) ? intval($_GET['page']) : 1;
|
||
|
||
// Redirect to 404 if page number is invalid
|
||
if ($current_page < 1) {
|
||
echo "<script> window.location.href = '404';</script>";
|
||
exit();
|
||
}
|
||
|
||
// Calculate the offset for SQL query
|
||
$offset = ($current_page - 1) * $products_per_page;
|
||
|
||
// Fetch total number of products matching the search query
|
||
$safe_query = mysqli_real_escape_string($conn, $search_query);
|
||
$total_products_query = "SELECT COUNT(*) as total FROM products WHERE cn_title LIKE '%$safe_query%' OR cn_short_description LIKE '%$safe_query%'";
|
||
$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
|
||
$products_query = "SELECT * FROM products WHERE cn_title LIKE '%$safe_query%' OR cn_short_description LIKE '%$safe_query%' ORDER BY id DESC LIMIT $offset, $products_per_page";
|
||
$products_result = mysqli_query($conn, $products_query);
|
||
|
||
if ($products_result && 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 src="../cms_admin/<?php echo htmlspecialchars($product['icon']); ?>" height="90px" alt="<?php echo htmlspecialchars($product['cn_title']); ?>">
|
||
</div>
|
||
<h5 class="case-one__title"><a href="product_details?id=<?php echo htmlspecialchars($product['id']); ?>" target="_blank"><?php echo htmlspecialchars($product['cn_title']); ?></a></h5>
|
||
<p class="case-one__text"><?php echo htmlspecialchars($product['cn_short_description']); ?></p>
|
||
<div class="case-one__btn-box">
|
||
<a href="product_details?id=<?php echo htmlspecialchars($product['id']); ?>" class="case-one__btn" target="_blank">开始使用 <span class="icon-up-right-arrow"></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php
|
||
}
|
||
} else {
|
||
echo "<p>未找到匹配您查询的产品。</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;
|
||
|
||
// Display pages when total pages <= 6
|
||
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 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 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 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>
|
||
|
||
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Free Trial Section -->
|
||
<?php include 'container/free_trail.php'; ?>
|
||
|
||
<!-- 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>
|
||
|
||
<script>
|
||
function adjustDisplay() {
|
||
const bottomBox = document.querySelector('.blog-details__bottom');
|
||
if (bottomBox) {
|
||
const childDivs = bottomBox.querySelectorAll('div');
|
||
|
||
childDivs.forEach(child => {
|
||
// 判断当前宽度
|
||
if (window.innerWidth < 768 || isMobileOrTablet()) {
|
||
// 小屏幕或移动设备，转换为块级元素
|
||
if (child.style.display === 'flex') {
|
||
child.style.display = 'block'; // 转换为块级元素
|
||
}
|
||
} else {
|
||
// 大屏幕，恢复为 flex
|
||
child.style.display = 'flex';
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 判断设备类型的函数
|
||
function isMobileOrTablet() {
|
||
return /Mobi|Tablet|iPad/i.test(navigator.userAgent);
|
||
}
|
||
|
||
// 监听页面宽度变化
|
||
function checkWidth() {
|
||
adjustDisplay();
|
||
}
|
||
|
||
// 页面加载时和窗口大小变化时执行
|
||
window.onload = checkWidth;
|
||
window.onresize = checkWidth;
|
||
|
||
</script>
|