System Manager v8.0

Editing: index.php

<?php include '../admin/includes/db.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>All Location Pages - Glorious Service</title>
  <meta name="description" content="Browse all our professional services across different locations" />
  <meta name="robots" content="index, follow">
  
  <link href="https://gloriousservice.com/assets/images/favicon/favicon.png" rel="icon">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="https://gloriousservice.com/assets/css/style.css">
  
  <style>
    :root {
      --primary: #0052da;
      --secondary: #f8f9fa;
    }

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #333;
      background: var(--secondary);
    }

/* Hero Section */
    .hero-section {
      background: linear-gradient(135deg, var(--primary) 0%, #003fa8 100%);
      color: white;
      padding: 80px 0;
      text-align: center;
    }

.hero-section h1 {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 15px;
    }

.hero-section p {
      font-size: 1.2rem;
      opacity: 0.95;
    }

/* Main Content */
    .content-section {
      padding: 60px 0;
    }

/* Results Info */
    .results-info {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40px;
      font-size: 1.1rem;
      color: var(--primary);
      font-weight: 600;
    }

/* Page Grid */
    .pages-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 30px;
      margin-bottom: 50px;
    }

.page-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

.page-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 35px rgba(0, 82, 218, 0.15);
    }

.page-card-image {
      width: 100%;
      height: 200px;
      background: linear-gradient(135deg, var(--primary) 0%, #003fa8 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      color: white;
      position: relative;
      overflow: hidden;
    }

.page-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.page-card-content {
      padding: 25px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

.page-badge {
      display: inline-block;
      background: #f0f7ff;
      color: var(--primary);
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 600;
      margin-bottom: 12px;
      width: fit-content;
    }

.page-card h3 {
      color: var(--primary);
      font-weight: 700;
      margin: 0 0 12px 0;
      font-size: 1.3rem;
      line-height: 1.4;
    }

.page-card p {
      color: #666;
      font-size: 0.95rem;
      margin: 0 0 15px 0;
      line-height: 1.6;
      flex-grow: 1;
    }

.page-meta {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 0.85rem;
      color: #999;
    }

.page-meta-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

.page-meta-item i {
      color: var(--primary);
    }

.page-services {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 20px;
    }

.service-tag {
      background: #f0f7ff;
      color: var(--primary);
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 600;
    }

.page-card-footer {
      margin-top: auto;
    }

.btn-visit {
      width: 100%;
      padding: 12px;
      background: linear-gradient(135deg, var(--primary) 0%, #003fa8 100%);
      color: white;
      text-decoration: none;
      border-radius: 8px;
      text-align: center;
      font-weight: 600;
      transition: all 0.3s ease;
      display: block;
      border: none;
      cursor: pointer;
    }

.btn-visit:hover {
      background: linear-gradient(135deg, #003fa8 0%, #002a7f 100%);
      color: white;
      transform: translateY(-2px);
    }

/* Empty State */
    .empty-state {
      text-align: center;
      padding: 80px 20px;
    }

.empty-state-icon {
      font-size: 4rem;
      color: var(--primary);
      margin-bottom: 20px;
      opacity: 0.3;
    }

.empty-state h3 {
      color: var(--primary);
      font-weight: 700;
      margin-bottom: 10px;
      font-size: 1.8rem;
    }

.empty-state p {
      color: #666;
      margin-bottom: 0;
      font-size: 1.05rem;
    }

/* Pagination */
    .pagination-section {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 50px 0;
      flex-wrap: wrap;
    }

.pagination-section a,
    .pagination-section span {
      padding: 12px 16px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      text-decoration: none;
      color: var(--primary);
      font-weight: 600;
      transition: all 0.3s ease;
      display: inline-block;
    }

.pagination-section a:hover {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }

.pagination-section .active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }

.pagination-section .disabled {
      color: #999;
      cursor: not-allowed;
      opacity: 0.5;
    }

/* Footer */
    footer {
      background: #ffffff;
      border-top: 1px solid #eaeaea;
      padding: 60px 0 30px;
      font-size: 15px;
    }

.footer-title {
      color: var(--primary);
      margin-bottom: 15px;
      font-weight: 600;
    }

.footer-text {
      color: #333;
      line-height: 1.7;
    }

.footer-links,
    .footer-contact {
      list-style: none;
      padding: 0;
      margin: 0;
    }

.footer-links li,
    .footer-contact li {
      margin-bottom: 8px;
    }

.footer-links a {
      color: #333;
      text-decoration: none;
    }

.footer-links a:hover {
      color: var(--primary);
    }

.footer-contact i {
      color: var(--primary);
      margin-right: 8px;
    }

.footer-social a {
      display: inline-block;
      margin-right: 12px;
      color: var(--primary);
      font-size: 18px;
    }

.footer-divider {
      margin: 30px 0;
    }

.footer-copy {
      margin: 0;
      color: #333;
    }

/* Floating Buttons */
    .floating-btn {
      position: fixed;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
      z-index: 9999;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
      transition: all 0.3s ease;
    }

.whatsapp-btn {
      background: #25D366;
      bottom: 20px;
      left: 20px;
    }

.call-btn {
      background: var(--primary);
      bottom: 20px;
      right: 20px;
    }

.floating-btn:hover {
      transform: scale(1.08);
    }

/* Responsive */
    @media (max-width: 768px) {
      .hero-section h1 {
        font-size: 2rem;
      }

.pages-grid {
        grid-template-columns: 1fr;
      }

.content-section {
        padding: 40px 0;
      }
    }
  </style>
</head>

<body>
  <div class="wrapper">
    
    <header class="header header-layout1">
      <div class="header-topbar">
        <div class="container-fluid">
          <div class="row align-items-center">
            <div class="col-12 d-flex align-items-center justify-content-between">
              <span class="topbar__text">
                <span class="colored__text"><i class="icon-alert"></i> Enjoy Our Hot Offers!</span>
                <span>Call for Free Estimate: +919760422337</span>
              </span>
              <div class="d-flex">
                <ul class="contact__list d-flex flex-wrap align-items-center list-unstyled mb-0">
                  <li>
                    <i class="icon-email"></i>
                    <a href="#">
                      <span>Email: </span> <span>enquiry@gloriousservice.com</span>
                    </a>
                  </li>
                </ul>
                <ul class="social-icons list-unstyled mb-0 ml-30">
                  <li><a href="https://www.facebook.com/share/1DRuo9siWB/"><i class="fab fa-facebook-f"></i></a></li>
                  <li><a href="https://www.instagram.com/gloriousservice"><i class="fab fa-instagram"></i></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

<nav class="navbar navbar-expand-lg sticky-navbar">
        <div class="container-fluid">
          <a class="navbar-brand" href="https://gloriousservice.com/index.php">
            <img src="https://gloriousservice.com/assets/images/logo/logo-light.png" class="logo-light" alt="logo">
            <img src="https://gloriousservice.com/assets/images/logo/logo-dark.png" class="logo-dark" alt="logo">
          </a>
          <button class="navbar-toggler" type="button">
            <span class="menu-lines"><span></span></span>
          </button>
          <div class="collapse navbar-collapse" id="mainNavigation">
            <ul class="navbar-nav mr-auto">
              <li class="nav__item">
                <a href="https://gloriousservice.com/index.php" class="nav__item-link">Home</a>
              </li>
              <li class="nav__item">
                <a href="https://gloriousservice.com/about-us.php" class="nav__item-link">About Us</a>
              </li>
              <li class="nav__item has-dropdown">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle nav__item-link">Services</a>
                <ul class="dropdown-menu">
                  <li class="nav__item"><a href="https://gloriousservice.com/cleaning.php" class="nav__item-link">Cleaning Service</a></li>
                  <li class="nav__item"><a class="nav__item-link" href="https://gloriousservice.com/carpenter.php">Carpenter Service</a></li>
                  <li class="nav__item"><a class="nav__item-link" href="https://gloriousservice.com/electrician.php">Electrician Service</a></li>
                  <li class="nav__item"><a class="nav__item-link" href="https://gloriousservice.com/furniture.php">Furniture Service</a></li>
                  <li class="nav__item"><a class="nav__item-link" href="https://gloriousservice.com/interior-design.php">Interior Design</a></li>
                  <li class="nav__item"><a class="nav__item-link" href="https://gloriousservice.com/kitchen.php">Modular Kitchen</a></li>
                  <li class="nav__item"><a class="nav__item-link" href="https://gloriousservice.com/painter.php">Painter Service</a></li>
                  <li class="nav__item"><a class="nav__item-link" href="https://gloriousservice.com/plumber.php">Plumber Service</a></li>
                  <li class="nav__item"><a class="nav__item-link" href="https://gloriousservice.com/waterprofing.php">Waterproofing Service</a></li>
                  <li class="nav__item"><a class="nav__item-link" href="https://gloriousservice.com/web-development.php">Web Development</a></li>
                  <li class="nav__item"><a class="nav__item-link" href="https://gloriousservice.com/welder.php">Welder Service</a></li>
                </ul>
              </li>
              <li class="nav__item">
                <a href="https://gloriousservice.com/location/" class="nav__item-link">Location</a>
              </li>
              <li class="nav__item">
                <a href="https://gloriousservice.com/blogs/index.php" class="nav__item-link">Blog</a>
              </li>
              <li class="nav__item">
                <a href="https://gloriousservice.com/contact-us.php" class="nav__item-link">Contact Us</a>
              </li>
            </ul>
            <button class="close-mobile-menu d-block d-lg-none"><i class="fas fa-times"></i></button>
          </div>
        </div>
      </nav>
    </header>

<section class="hero-section">
      <div class="container">
        <h1>Our Location Pages</h1>
        <p>Professional services across different cities</p>
      </div>
    </section>

<section class="content-section">
      <div class="container">
        
        <?php
        // Pagination Settings
        $items_per_page = 12;
        $page = isset($_GET['page']) ? max(1, (int)$_GET['page']) : 1;
        $offset = ($page - 1) * $items_per_page;

// Get Total Count
        $count_result = mysqli_query($conn, "SELECT COUNT(*) as total FROM pages WHERE status='published'");
        $count_row = mysqli_fetch_assoc($count_result);
        $total_pages = ceil($count_row['total'] / $items_per_page);

// Fetch Pages
        $query = "SELECT * FROM pages WHERE status='published' ORDER BY created_at DESC LIMIT $offset, $items_per_page";
        $result = mysqli_query($conn, $query);
        $pages = mysqli_fetch_all($result, MYSQLI_ASSOC);

// Results Info
        $total_results = $count_row['total'];
        echo '<div class="results-info">
          📄 Showing ' . count($pages) . ' of <strong>' . $total_results . '</strong> page' . ($total_results != 1 ? 's' : '') . '
        </div>';

// Display Pages or Empty State
        if (empty($pages)) {
          echo '<div class="empty-state">
            <div class="empty-state-icon">📄</div>
            <h3>No Pages Found</h3>
            <p>There are no location pages available at the moment.</p>
          </div>';
        } else {
          echo '<div class="pages-grid">';
          
          $service_info = [
            'carpenter' => ['🪛', 'Carpenter'],
            'plumber' => ['🚰', 'Plumber'],
            'electrician' => ['⚡', 'Electrician'],
            'cleaning' => ['🧹', 'Cleaning'],
            'welder' => ['🔥', 'Welder'],
            'interior_designer' => ['🎨', 'Interior Designer'],
            'cctv' => ['📹', 'CCTV'],
            'furniture_assembly' => ['🛋️', 'Furniture Assembly'],
            'painter' => ['🎭', 'Painter'],
            'waterproofing' => ['💧', 'Waterproofing'],
            'kitchen' => ['🍳', 'Modular Kitchen'],
            'web_development' => ['💻', 'Web Development']
          ];

foreach ($pages as $page_item) {
            $services = json_decode($page_item['services'], true) ?? [];
            $featured_image = !empty($page_item['featured_image']) ? 
              'https://' . $_SERVER['HTTP_HOST'] . '/admin/uploads/page-images/' . $page_item['featured_image'] : '';
            
            // Create page URL
            $page_url = '/location/' . strtolower(str_replace(' ', '-', $page_item['city'])) . '/' . $page_item['slug'];
        ?>
          <div class="page-card">
            <div class="page-card-image">
              <?php if (!empty($featured_image)): ?>
                <img src="<?php echo htmlspecialchars($featured_image); ?>" alt="<?php echo htmlspecialchars($page_item['title']); ?>">
              <?php else: ?>
                <i class="fas fa-map-location-dot"></i>
              <?php endif; ?>
            </div>

<div class="page-meta">
                <div class="page-meta-item">
                  <i class="fas fa-calendar"></i>
                  <?php echo date('M d, Y', strtotime($page_item['created_at'])); ?>
                </div>
                <div class="page-meta-item">
                  <i class="fas fa-list"></i>
                  <?php echo count($services); ?> Services
                </div>
              </div>

<?php if (!empty($services)): ?>
                <div class="page-services">
                  <?php
                  $display_count = 0;
                  foreach ($services as $service) {
                    if ($display_count < 3 && isset($service_info[$service])) {
                      echo '<span class="service-tag">' . $service_info[$service][0] . ' ' . $service_info[$service][1] . '</span>';
                      $display_count++;
                    }
                  }
                  if (count($services) > 3) {
                    echo '<span class="service-tag">+' . (count($services) - 3) . ' more</span>';
                  }
                  ?>
                </div>
              <?php endif; ?>

<div class="page-card-footer">
                <a href="<?php echo $page_url; ?>" class="btn-visit">
                  <i class="fas fa-arrow-right"></i> View Details
                </a>
              </div>
            </div>
          </div>
        <?php
          }
          echo '</div>';

// Pagination
          if ($total_pages > 1) {
            echo '<div class="pagination-section">';
            
            if ($page > 1) {
              echo '<a href="index.php?page=' . ($page - 1) . '"><i class="fas fa-chevron-left"></i> Previous</a>';
            } else {
              echo '<span class="disabled"><i class="fas fa-chevron-left"></i> Previous</span>';
            }

for ($i = 1; $i <= $total_pages; $i++) {
              if ($i == $page) {
                echo '<span class="active">' . $i . '</span>';
              } else {
                echo '<a href="index.php?page=' . $i . '">' . $i . '</a>';
              }
            }

if ($page < $total_pages) {
              echo '<a href="index.php?page=' . ($page + 1) . '">Next <i class="fas fa-chevron-right"></i></a>';
            } else {
              echo '<span class="disabled">Next <i class="fas fa-chevron-right"></i></span>';
            }

echo '</div>';
          }
        }
        ?>
      </div>
    </section>

<footer class="gs-footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-6 col-lg-4 mb-30">
            <h4 class="footer-title">Glorious Service</h4>
            <p class="footer-text">Glorious Service provides trusted home and professional services including carpentry, plumbing, electrical work, interior design, waterproofing, modular kitchens and web development.</p>
            <div class="footer-social">
              <a href="https://www.facebook.com/share/1DRuo9siWB/" target="_blank"><i class="fab fa-facebook-f"></i></a>
              <a href="https://www.instagram.com/gloriousservice" target="_blank"><i class="fab fa-instagram"></i></a>
              <a href="https://youtube.com/@gloriousservice?si=CKxQKt_pum-osIC9" target="_blank"><i class="fab fa-youtube"></i></a>
              <a href="https://www.reddit.com/u/Responsible-Hold4167/s/g5OTzWNx5Z" target="_blank"><i class="fab fa-reddit-alien"></i></a>
              <a href="https://x.com/gloriousservic" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
              <a href="https://gloriousservice.tumblr.com/?source=share" target="_blank"><i class="fab fa-tumblr"></i></a>
            </div>
          </div>

<div class="col-sm-6 col-md-6 col-lg-2 mb-30">
            <h5 class="footer-title">Quick Links</h5>
            <ul class="footer-links">
              <li><a href="https://gloriousservice.com/index.php">Home</a></li>
              <li><a href="https://gloriousservice.com/about-us.php">About Us</a></li>
              <li><a href="https://gloriousservice.com/location/">Location</a></li>
              <li><a href="https://gloriousservice.com/contact-us.php">Contact Us</a></li>
              <li><a href="https://gloriousservice.com/blogs/index.php">Blog</a></li>
            </ul>
          </div>

<div class="col-sm-6 col-md-6 col-lg-3 mb-30">
            <h5 class="footer-title">Our Services</h5>
            <ul class="footer-links">
              <li><a href="#">Carpenter</a></li>
              <li><a href="#">Plumber</a></li>
              <li><a href="#">Electrician</a></li>
              <li><a href="#">Interior Designer</a></li>
              <li><a href="#">Waterproofing</a></li>
              <li><a href="#">Web Development</a></li>
            </ul>
          </div>

<div class="col-sm-12 col-md-6 col-lg-3 mb-30">
            <h5 class="footer-title">Contact Info</h5>
            <ul class="footer-contact">
              <li><i class="fas fa-phone"></i> +91 79060 68123</li>
              <li><i class="fas fa-envelope"></i> enquiry@gloriousservice.com</li>
              <li><i class="fas fa-map-marker-alt"></i> Dehradun • Rishikesh • Haridwar</li>
            </ul>
          </div>
        </div>

<div class="row align-items-center">
          <div class="col-md-6 text-center text-md-left">
            <p class="footer-copy">© <span id="year"></span> Glorious Service. All Rights Reserved.</p>
          </div>
          <div class="col-md-6 text-center text-md-right">
            Developed by <a href="https://gloriousservice.com" target="_blank">Glorious Service</a>
          </div>
        </div>
      </div>
    </footer>

<a href="https://wa.me/917906068123" target="_blank" class="floating-btn whatsapp-btn">
      <i class="fab fa-whatsapp"></i>
    </a>

</div>

</html>

Cancel