262 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			PHP
		
	
	
	
	
	
		
		
			
		
	
	
			262 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			PHP
		
	
	
	
	
	
|   | <!DOCTYPE html> | ||
|  | 
 | ||
|  | <html> | ||
|  | <head> | ||
|  |     <meta charset="utf-8"> | ||
|  |     <?php include('../cms_admin/db_connection.php'); ?>
 | ||
|  |     <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"> | ||
|  | 
 | ||
|  |     <?php | ||
|  |     // Fetch blog details based on blog ID from the query string
 | ||
|  |     $blog_id = isset($_GET['blog']) ? mysqli_real_escape_string($conn, $_GET['blog']) : ''; | ||
|  | 
 | ||
|  |     if ($blog_id) { | ||
|  |         $query = "SELECT title, image, tags, description, created_at FROM cn_blogs WHERE id = $blog_id"; | ||
|  | 
 | ||
|  |         $result = mysqli_query($conn, $query); | ||
|  | 
 | ||
|  |         if ($result && mysqli_num_rows($result) > 0) { | ||
|  |             $blog = mysqli_fetch_assoc($result); | ||
|  |             $title = htmlspecialchars($blog['title']); | ||
|  |             $tags = htmlspecialchars($blog['tags']); | ||
|  |             $description = $blog['description']; | ||
|  |             $created_at = new DateTime($blog['created_at']); | ||
|  |             $formatted_date = $created_at->format('d M Y'); | ||
|  | 
 | ||
|  |             // 设置SEO相关信息
 | ||
|  |             $max_description_length = 160; // 根据SEO需要设置合适的长度
 | ||
|  |             $page_description = substr($description, 0, $max_description_length); | ||
|  | 
 | ||
|  |             $site_title_suffix = " - AI Tool Path 最全的AI工具导航"; // 替换为您的网站名称
 | ||
|  |             $site_keywords_suffix = " - AI工具, AI工具目录, AI Tool Path, AI软件, AI工具指南, AI应用程序, AI技术, 最佳AI工具, 开发者AI工具, 营销人员AI工具, AI工具路径, AIPT"; // 替换为您的关键词
 | ||
|  | 
 | ||
|  |             $page_title = $title . $site_title_suffix; | ||
|  |             $page_keywords = $tags . $site_keywords_suffix; | ||
|  | 
 | ||
|  | 
 | ||
|  |         } else { | ||
|  |             echo "<script> window.location.href = '404';</script>"; | ||
|  |             exit(); | ||
|  |         } | ||
|  |     } else { | ||
|  |         echo "<script>window.location.href = '404';</script>"; | ||
|  |         exit(); | ||
|  |     } | ||
|  |     ?>
 | ||
|  | 
 | ||
|  |     <title><?php echo $page_title; ?></title>
 | ||
|  |     <meta name="description" content="<?php echo $page_description; ?>"> | ||
|  |     <meta name="keywords" content="<?php echo $page_keywords; ?>"> | ||
|  | </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> | ||
|  |     <style> | ||
|  |         h1,h2,h3,h4,h5,h6 { | ||
|  |             color: #fff !important;
 | ||
|  |             line-height: 2 !important; | ||
|  |         } | ||
|  | .blog-details__bottom h1, | ||
|  | .blog-details__bottom h2, | ||
|  | .blog-details__bottom h3, | ||
|  | .blog-details__bottom h4, | ||
|  | .blog-details__bottom h5, | ||
|  | .blog-details__bottom h6 { | ||
|  |     font-size: 18px !important; | ||
|  | } | ||
|  | 
 | ||
|  |         p, span { | ||
|  |             font-size: 18px !important; | ||
|  |             line-height: 1.7 !important; | ||
|  |         } | ||
|  |     </style> | ||
|  |     <!-- Page Title End --> | ||
|  | 
 | ||
|  |       <!-- Blog Details Start --> | ||
|  |       <section class="blog-details"> | ||
|  |          <div class="container"> | ||
|  |             <div class="blog-details__top-title"> | ||
|  |                <h2 style="line-height:1.5 !important;"><?php echo $title; ?></h2>
 | ||
|  |                        <p><strong>Source: </strong><a href="https://www.aitoolpath.com" target="_blank">AIPT</a></p> | ||
|  |                            <p><strong>Published on: </strong><?php echo $formatted_date; ?></p>
 | ||
|  |                            <p><strong>Tags: </strong><?php echo $tags; ?></p>
 | ||
|  |             </div> | ||
|  | 
 | ||
|  |             <div class="blog-details__bottom"> | ||
|  |             <br> | ||
|  |               <?php echo $description; ?>
 | ||
|  |             </div> | ||
|  |             <br> | ||
|  |             <hr> | ||
|  |          </div> | ||
|  | 
 | ||
|  | 
 | ||
|  |         <?php | ||
|  |         // Fetch comments from the database
 | ||
|  |         $qry = "SELECT * FROM comment WHERE status = 1 AND b_id='$blog_id'"; | ||
|  |         $result = mysqli_query($conn, $qry); | ||
|  | 
 | ||
|  |         if (mysqli_num_rows($result) > 0) { | ||
|  |             echo '<div class="container"> | ||
|  |                      <div class="career-page__bottom"> | ||
|  |                          <ul class="career-page__list list-unstyled">'; | ||
|  |             while ($row = mysqli_fetch_assoc($result)) { | ||
|  |                 $name = $row['name']; | ||
|  |                 $message = $row['message']; | ||
|  |                 echo '<li> | ||
|  |                         <div class="career-page__single"> | ||
|  |                             <div class="career-page__single-left"> | ||
|  |                                 <div class="career-page__icon" style="width:150px;"> | ||
|  |                                     <img src="../cms_admin/assets/images/user.webp" height="60px" alt=""> | ||
|  |                                 </div> | ||
|  |                                 <div class="career-page__content" style="margin-top:-10px;"> | ||
|  |                                     <h3 class="career-page__single-title"><a href="#">' . htmlspecialchars($name) . '</a></h3> | ||
|  |                                     <p>' . htmlspecialchars($message) . '</p> | ||
|  |                                 </div> | ||
|  |                             </div> | ||
|  |                         </div> | ||
|  |                       </li>'; | ||
|  |             } | ||
|  |             echo '</ul></div></div>'; | ||
|  |         } else { | ||
|  |             echo "<p style='text-align:center;'></p>"; | ||
|  |         } | ||
|  |         ?>
 | ||
|  | 
 | ||
|  |         <div class="container mt-5" id="comment"> | ||
|  |             <div class="contact-one__form-box"> | ||
|  |                 <form method="POST" action="" id="contact-form"> | ||
|  |                     <div class="row"> | ||
|  |                         <div class="col-md-6"> | ||
|  |                             <div class="form-group"> | ||
|  |                                 <p class="contact-one__form-label">Name*</p> | ||
|  |                                 <input type="text" name="name" placeholder="John Smith" required=""> | ||
|  |                                 <div class="contact-one__form-icon"> | ||
|  |                                     <i class="fas fa-user"></i> | ||
|  |                                 </div> | ||
|  |                             </div> | ||
|  |                         </div> | ||
|  |                         <div class="col-md-6"> | ||
|  |                             <div class="form-group"> | ||
|  |                                 <p class="contact-one__form-label">Email*</p> | ||
|  |                                 <input type="email" name="email" placeholder="marveltheme@gmail.com" required=""> | ||
|  |                                 <div class="contact-one__form-icon"> | ||
|  |                                     <i class="far fa-envelope"></i> | ||
|  |                                 </div> | ||
|  |                             </div> | ||
|  |                         </div> | ||
|  |                     </div> | ||
|  |                     <div class="form-group text-message-box mt-3"> | ||
|  |                         <p class="contact-one__form-label">Comment</p> | ||
|  |                         <textarea name="message" placeholder="Enter your comment here"></textarea> | ||
|  |                     </div> | ||
|  |                     <div class="form-group"> | ||
|  |                         <div class="button-box"> | ||
|  |                             <button type="submit" class="thm-btn contact-one__btn" data-loading-text="Please wait..."> | ||
|  |                                 Submit | ||
|  |                             </button> | ||
|  |                         </div> | ||
|  |                     </div> | ||
|  |                 </form> | ||
|  |                 <br><br> | ||
|  |                 <?php if (!empty($_GET['status'])) { ?>
 | ||
|  |                     <div class="alert alert-success" role="alert"> | ||
|  |                         Comment submitted! After approval, it will be visible on the website. Thank you for showing interest and giving your comment. | ||
|  |                     </div> | ||
|  |                 <?php } ?>
 | ||
|  |                 <p class="ajax-response mb-0"></p> | ||
|  |             </div> | ||
|  |         </div> | ||
|  |     </section> | ||
|  |     <!-- Blog Details End --> | ||
|  |     <!-- Free Trail Start --> | ||
|  |     <?php include 'container/free_trail.php'; ?>
 | ||
|  |     <!-- Free Trail End --> | ||
|  |     <!-- Main Footer Start --> | ||
|  |     <?php include 'container/footer.php'; ?>
 | ||
|  |     <!-- Main Footer End --> | ||
|  |     <?php include 'container/footer_links.php'; ?>
 | ||
|  | </body> | ||
|  | </html> | ||
|  | 
 | ||
|  | <?php | ||
|  | // Check if form is submitted
 | ||
|  | if ($_SERVER['REQUEST_METHOD'] == 'POST') { | ||
|  |     // Sanitize and fetch inputs
 | ||
|  |     $name = mysqli_real_escape_string($conn, $_POST['name']); | ||
|  |     $email = mysqli_real_escape_string($conn, $_POST['email']); | ||
|  |     $message = mysqli_real_escape_string($conn, $_POST['message']); | ||
|  | 
 | ||
|  |     // Get the IP address of the user
 | ||
|  |     $ip_address = $_SERVER['REMOTE_ADDR']; | ||
|  | 
 | ||
|  |     // Insert data into the database
 | ||
|  |     $qry = "INSERT INTO comment (b_id, name, email, message, ip_address, created_at, status)
 | ||
|  |             VALUES ('$blog_id', '$name', '$email', '$message', '$ip_address', NOW(), '0')";
 | ||
|  | 
 | ||
|  |     $run = mysqli_query($conn, $qry); | ||
|  | 
 | ||
|  |     if ($run) { | ||
|  |         echo "<script>window.location.href='blog-details.php?blog=$blog_id&status=true#comment';</script>"; | ||
|  |     } else { | ||
|  |         echo "Error inserting data: " . mysqli_error($conn); | ||
|  |     } | ||
|  | } | ||
|  | ?>
 | ||
|  | 
 | ||
|  | <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> |