View Code - 20260723

gallery.php | 20260723_000646.php Initial Domain Snapshot

<?php
/* =============================================
   File: /gallery.php
   Purpose: Complete ERP Gallery & Screenshot Showcase
   ============================================= */
require_once __DIR__ . '/erp/config.php';

// Ensure $pdo is available
if (!isset($pdo)) {
    require_once __DIR__ . '/erp/core/db.php';
}

// Fetch all active landing sections
$stmt = $pdo->prepare("
    SELECT *
    FROM landing_sections
    WHERE company_id = ?
      AND is_active = 1
    ORDER BY sort_order ASC, id ASC
");

$stmt->execute([3]);
$all_sections = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Group by category if available
$sections_by_category = [];
foreach ($all_sections as $section) {
    $category = !empty($section['category']) ? $section['category'] : 'General';
    if (!isset($sections_by_category[$category])) {
        $sections_by_category[$category] = [];
    }
    $sections_by_category[$category][] = $section;
}
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ERP Gallery | Mr. Manager - View All Screenshots</title>
  <meta name="description" content="Explore the complete gallery of Mr. Manager ERP interface screenshots, dashboards, and powerful business management features.">

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

body{
      font-family:Inter,Arial,sans-serif;
      background:#f4f8f5;
      color:var(--text);
      line-height:1.6;
    }

a{
      text-decoration:none;
    }

.wrapper{
      width:100%;
      max-width:1400px;
      margin:auto;
      padding:0 20px;
    }

/* =========================
       HEADER
    ========================= */

.topbar{
      background:var(--white);
      border-bottom:1px solid var(--border);
      position:sticky;
      top:0;
      z-index:999;
      backdrop-filter:blur(10px);
    }

.navbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:16px 0;
      gap:20px;
    }

.brand{
      display:flex;
      align-items:center;
      gap:12px;
    }

.brand-logo{
      width:48px;
      height:48px;
      border-radius:14px;
      background:linear-gradient(135deg,var(--primary),#43a047);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:22px;
      font-weight:800;
      box-shadow:var(--shadow);
    }

.brand-text h1{
      font-size:22px;
      color:var(--secondary);
      margin:0;
      line-height:1.2;
    }

.brand-text p{
      margin:0;
      font-size:13px;
      color:var(--muted);
    }

.nav-actions{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:12px 22px;
      border-radius:12px;
      font-weight:700;
      transition:.25s ease;
      border:none;
      cursor:pointer;
      font-size:15px;
    }

.btn-primary{
      background:var(--primary);
      color:#fff;
      box-shadow:var(--shadow);
    }

.btn-primary:hover{
      background:var(--primary-dark);
      transform:translateY(-2px);
    }

.btn-outline{
      border:1px solid var(--border);
      background:#fff;
      color:var(--secondary);
    }

.btn-outline:hover{
      background:#f1f5f9;
    }

/* =========================
       GALLERY PAGE
    ========================= */

.gallery-page-hero{
      padding:60px 0 40px;
      text-align:center;
    }

.gallery-page-hero h1{
      font-size:48px;
      color:var(--secondary);
      margin-bottom:16px;
      line-height:1.2;
    }

.gallery-page-hero h1 span{
      color:var(--primary);
    }

.gallery-page-hero p{
      font-size:18px;
      color:var(--muted);
      max-width:700px;
      margin:0 auto;
    }

/* =========================
       FILTERS & TABS
    ========================= */

.gallery-controls{
      display:flex;
      justify-content:center;
      gap:12px;
      margin:40px 0;
      flex-wrap:wrap;
    }

.filter-btn{
      padding:10px 20px;
      border:1px solid var(--border);
      background:#fff;
      color:var(--text);
      border-radius:12px;
      font-weight:600;
      cursor:pointer;
      transition:.2s ease;
    }

.filter-btn:hover,
    .filter-btn.active{
      background:var(--primary);
      color:#fff;
      border-color:var(--primary);
    }

/* =========================
       FULL GALLERY GRID
    ========================= */

.gallery-container{
      margin:50px 0;
    }

.gallery-full-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(380px, 1fr));
      gap:28px;
      margin-bottom:40px;
    }

.gallery-item{
      position:relative;
      overflow:hidden;
      border-radius:16px;
      background:#1a1f2e;
      box-shadow:
        0 4px 12px rgba(0,0,0,.10),
        0 12px 28px rgba(0,0,0,.08);
      transition:all .35s cubic-bezier(0.4,0,0.2,1);
      cursor:pointer;
      display:flex;
      flex-direction:column;
    }

.gallery-item:hover{
      transform:translateY(-10px);
      box-shadow:0 25px 60px rgba(0,0,0,.15);
    }

/* Gallery item browser chrome */
    .item-chrome{
      background:linear-gradient(180deg,#2d3348,#252a3a);
      padding:9px 14px;
      display:flex;
      align-items:center;
      gap:10px;
      border-bottom:1px solid rgba(255,255,255,.05);
      flex-shrink:0;
    }

.item-chrome-dots{
      display:flex;
      gap:5px;
      flex-shrink:0;
    }

.item-chrome-dots span{
      display:block;
      width:8px;
      height:8px;
      border-radius:50%;
    }

.item-chrome-url{
      flex:1;
      background:rgba(255,255,255,.06);
      border-radius:5px;
      height:16px;
      font-size:10px;
      color:#64748b;
      padding:0 8px;
      display:flex;
      align-items:center;
      font-family:monospace;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }

.gallery-item-image-wrapper{
      position:relative;
      width:100%;
      height:240px;
      overflow:hidden;
      background:#1e293b;
    }

.gallery-item-image{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .5s cubic-bezier(0.4, 0, 0.2, 1);
    }

.gallery-item:hover .gallery-item-image{
      transform:scale(1.08);
    }

.gallery-item-overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.5) 100%);
      opacity:0;
      transition:opacity .3s ease;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      padding:20px;
    }

.gallery-item:hover .gallery-item-overlay{
      opacity:1;
    }

.gallery-item-content{
      flex:1;
      padding:20px;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      background:#fff;
    }

.gallery-item-content h3{
      font-size:18px;
      color:var(--secondary);
      margin-bottom:8px;
      line-height:1.3;
      font-weight:700;
    }

.gallery-item-content p{
      font-size:14px;
      color:var(--muted);
      margin:0;
      line-height:1.5;
      flex:1;
    }

.gallery-item-footer{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:12px;
      padding-top:12px;
      border-top:1px solid var(--border);
    }

.gallery-item-category{
      display:inline-block;
      background:#e8f5e9;
      color:var(--primary-dark);
      padding:6px 12px;
      border-radius:8px;
      font-size:12px;
      font-weight:700;
    }

.gallery-view-btn{
      background:var(--primary);
      color:#fff;
      padding:8px 16px;
      border-radius:8px;
      font-size:13px;
      font-weight:700;
      transition:.2s ease;
      cursor:pointer;
      border:none;
    }

.gallery-view-btn:hover{
      background:var(--primary-dark);
      transform:translateY(-2px);
    }

/* =========================
       MODAL / LIGHTBOX
    ========================= */

.modal{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.9);
      z-index:10000;
      align-items:center;
      justify-content:center;
      padding:20px;
      animation:fadeIn .3s ease;
    }

.modal.show{
      display:flex;
    }

@keyframes fadeIn{
      from{
        opacity:0;
      }
      to{
        opacity:1;
      }
    }

.modal-content{
      position:relative;
      max-width:900px;
      width:100%;
      max-height:90vh;
      display:flex;
      flex-direction:column;
      animation:slideUp .3s ease;
      overflow:hidden;
    }

/* Dot colors used in browser chrome */
    .dot-red   { background:#ff5f57; }
    .dot-yellow{ background:#febc2e; }
    .dot-green { background:#28c840; }

@keyframes slideUp{
      from{
        transform:translateY(50px);
        opacity:0;
      }
      to{
        transform:translateY(0);
        opacity:1;
      }
    }

.modal-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:16px;
      color:#fff;
    }

.modal-header h2{
      font-size:28px;
      margin:0;
    }

.modal-close{
      background:#fff;
      border:none;
      width:40px;
      height:40px;
      border-radius:50%;
      font-size:24px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:.2s ease;
      color:#000;
    }

.modal-close:hover{
      background:#f0f0f0;
      transform:scale(1.1);
    }

/* Modal browser mockup */
    .modal-browser{
      border-radius:14px;
      overflow:hidden;
      background:#1a1f2e;
      box-shadow:
        0 4px 12px rgba(0,0,0,.3),
        0 16px 40px rgba(0,0,0,.4),
        0 40px 80px rgba(0,0,0,.3);
      margin-bottom:20px;
    }

.modal-chrome{
      background:linear-gradient(180deg,#2d3348 0%,#252a3a 100%);
      padding:11px 16px;
      display:flex;
      align-items:center;
      gap:12px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }

.modal-dots{
      display:flex;
      gap:6px;
      flex-shrink:0;
    }

.modal-dots span{
      display:block;
      width:11px;
      height:11px;
      border-radius:50%;
    }

.modal-address{
      flex:1;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.08);
      border-radius:6px;
      padding:5px 12px;
      font-size:11px;
      color:#94a3b8;
      font-family:monospace;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

.modal-screen{
      overflow:hidden;
      max-height:55vh;
      background:#f8fafc;
      overflow-y:auto;
    }

.modal-screen img{
      width:100%;
      height:auto;
      display:block;
    }

.modal-info{
      background:#1e293b;
      color:#cbd5e1;
      padding:18px 22px;
      border-radius:12px;
      margin-bottom:16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

.modal-info-text h3{
      color:#fff;
      margin-bottom:5px;
      font-size:17px;
    }

.modal-info-text p{
      color:#94a3b8;
      line-height:1.5;
      margin:0;
      font-size:14px;
    }

.modal-nav{
      display:flex;
      justify-content:space-between;
      gap:10px;
    }

.modal-nav-btn{
      flex:1;
      padding:11px 16px;
      background:#fff;
      border:none;
      border-radius:8px;
      font-weight:700;
      font-size:14px;
      cursor:pointer;
      transition:.2s ease;
      color:var(--secondary);
    }

.modal-nav-btn:hover{
      background:#f0f0f0;
      transform:translateY(-2px);
    }

/* =========================
       NO RESULTS
    ========================= */

.no-results{
      text-align:center;
      padding:100px 20px;
      color:var(--muted);
    }

.no-results h2{
      font-size:28px;
      color:var(--secondary);
      margin-bottom:12px;
    }

.no-results p{
      font-size:16px;
      margin-bottom:30px;
    }

/* =========================
       FOOTER
    ========================= */

footer{
      margin-top:70px;
      background:#0f172a;
      color:#cbd5e1;
    }

.footer-inner{
      padding:50px 0 30px;
      display:grid;
      grid-template-columns:2fr 1fr 1fr;
      gap:30px;
      max-width:1400px;
      margin:auto;
      padding-left:20px;
      padding-right:20px;
    }

.footer-brand h3{
      color:#fff;
      margin-bottom:14px;
      font-size:26px;
    }

.footer-brand p{
      color:#94a3b8;
      max-width:500px;
    }

.footer-links h4{
      color:#fff;
      margin-bottom:14px;
    }

.footer-links a{
      display:block;
      color:#94a3b8;
      margin-bottom:10px;
      transition:.2s ease;
    }

.footer-links a:hover{
      color:#fff;
    }

.footer-bottom{
      border-top:1px solid rgba(255,255,255,.08);
      padding:18px 0;
      text-align:center;
      font-size:14px;
      color:#94a3b8;
      max-width:1400px;
      margin:auto;
      padding-left:20px;
      padding-right:20px;
    }

/* =========================
       RESPONSIVE
    ========================= */

@media(max-width:960px){
      .gallery-full-grid{
        grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
        gap:24px;
      }

.gallery-page-hero h1{
        font-size:36px;
      }

.footer-inner{
        grid-template-columns:1fr;
      }

.modal-content{
        max-height:85vh;
      }
    }

@media(max-width:600px){
      .gallery-full-grid{
        grid-template-columns:1fr;
        gap:20px;
      }

.gallery-page-hero{
        padding:40px 0 30px;
      }

.gallery-page-hero h1{
        font-size:28px;
      }

.gallery-page-hero p{
        font-size:15px;
      }

.gallery-controls{
        gap:8px;
      }

.filter-btn{
        padding:8px 16px;
        font-size:14px;
      }

.gallery-item-image-wrapper{
        height:240px;
      }

.gallery-item-content{
        padding:18px;
      }

.gallery-item-content h3{
        font-size:16px;
      }

.gallery-item-content p{
        font-size:13px;
      }

.modal-header{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
      }

.modal-header h2{
        font-size:22px;
      }

.modal-nav{
        flex-direction:column;
      }

.navbar{
        flex-direction:column;
        align-items:flex-start;
      }
    }
  </style>
</head>
<body>

<header class="topbar">
    <div class="wrapper navbar">
      <div class="brand">
        <div class="brand-logo">MM</div>
        <div class="brand-text">
          <h1>Mr. Manager</h1>
          <p>Smart ERP & Business Automation</p>
        </div>
      </div>
      <div class="nav-actions">
        <a href="/" class="btn btn-outline">← Back to Home</a>
        <a href="/erp/index.php" class="btn btn-primary">Login to ERP</a>
      </div>
    </div>
  </header>

<section class="gallery-page-hero">
    <div class="wrapper">
      <h1>ERP Gallery & <span>Interface Preview</span></h1>
      <p>Discover the complete feature set of Mr. Manager ERP with comprehensive screenshots of all business modules and workflows.</p>
    </div>
  </section>

<?php if (!empty($sections_by_category) && count($sections_by_category) > 1): ?>
  <div class="gallery-controls">
    <button class="filter-btn active" data-filter="all">All Modules</button>
    <?php foreach (array_keys($sections_by_category) as $cat): ?>
    <button class="filter-btn" data-filter="<?= strtolower(str_replace(' ', '-', $cat)) ?>">
      <?= htmlspecialchars($cat) ?>
    </button>
    <?php endforeach; ?>
  </div>
  <?php endif; ?>

<section class="gallery-container">
    <div class="wrapper">
      <?php if (empty($all_sections)): ?>
        <div class="no-results">
          <h2>📸 No Screenshots Yet</h2>
          <p>The ERP gallery will be populated with screenshots soon. Please check back later!</p>
          <a href="/" class="btn btn-primary">Return to Home</a>
        </div>
      <?php else: ?>
        <div class="gallery-full-grid" id="galleryGrid">
          <?php foreach ($all_sections as $section): ?>
            <?php
            $image = !empty($section['external_image_url'])
                ? $section['external_image_url']
                : $section['image_path'];
            $category = !empty($section['category']) ? $section['category'] : 'General';
            $categorySlug = strtolower(str_replace(' ', '-', $category));
            ?>
            <div class="gallery-item" data-category="<?= $categorySlug ?>" data-id="<?= htmlspecialchars($section['id']) ?>">

<div class="item-chrome">
                <div class="item-chrome-dots">
                  <span class="dot-red"></span>
                  <span class="dot-yellow"></span>
                  <span class="dot-green"></span>
                </div>
                <div class="item-chrome-url">mistermanager.in/erp</div>
              </div>

<div class="gallery-item-image-wrapper">
                <?php if (!empty($image)): ?>
                  <img
                    src="<?= htmlspecialchars($image) ?>"
                    alt="<?= htmlspecialchars($section['title']) ?>"
                    loading="lazy"
                    class="gallery-item-image"
                  >
                <?php else: ?>
                  <div style="width:100%;height:100%;background:linear-gradient(135deg,#1e293b,#334155);display:flex;align-items:center;justify-content:center;color:#475569;font-weight:600;">
                    ERP MODULE
                  </div>
                <?php endif; ?>
                <div class="gallery-item-overlay">
                  <button class="gallery-view-btn open-modal" data-id="<?= htmlspecialchars($section['id']) ?>">
                    View Full Size &rarr;
                  </button>
                </div>
              </div>
              <div class="gallery-item-content">
                <h3><?= htmlspecialchars($section['title']) ?></h3>
                <p><?= htmlspecialchars($section['description'] ?? '') ?></p>
                <div class="gallery-item-footer">
                  <span class="gallery-item-category"><?= htmlspecialchars($category) ?></span>
                  <button class="gallery-view-btn open-modal" data-id="<?= htmlspecialchars($section['id']) ?>">View</button>
                </div>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>
    </div>
  </section>

<div class="modal-header">
        <h2 id="modalTitle">ERP Preview</h2>
        <button class="modal-close" onclick="closeModal()">×</button>
      </div>

<div class="modal-browser">

<div class="modal-chrome">
          <div class="modal-dots">
            <span class="dot-red"></span>
            <span class="dot-yellow"></span>
            <span class="dot-green"></span>
          </div>
          <div class="modal-address" id="modalAddress">app.mistermanager.in/erp</div>
        </div>

<div class="modal-screen">
          <img id="modalImage" src="" alt="ERP Screenshot">
        </div>

</div>

<div class="modal-info">
        <div class="modal-info-text">
          <h3 id="modalInfoTitle">Module</h3>
          <p id="modalInfoDesc">Description</p>
        </div>
      </div>

<div class="modal-nav">
        <button class="modal-nav-btn" onclick="previousImage()">← Previous</button>
        <button class="modal-nav-btn" onclick="closeModal()">✕ Close</button>
        <button class="modal-nav-btn" onclick="nextImage()">Next →</button>
      </div>

</div>
  </div>

<footer>
    <div class="footer-inner">
      <div class="footer-brand">
        <h3>Mr. Manager</h3>
        <p>A powerful ERP and business management platform designed for production tracking, inventory, salary automation, and operational excellence.</p>
      </div>
      <div class="footer-links">
        <h4>Platform</h4>
        <a href="/">Home</a>
        <a href="/erp/index.php">Login</a>
        <a href="#features">Features</a>
      </div>
      <div class="footer-links">
        <h4>Company</h4>
        <a href="#about">About</a>
        <a href="/erp/index.php">Contact</a>
        <a href="/erp/index.php">Support</a>
      </div>
    </div>
    <div class="footer-bottom">
      <p>&copy; 2026 Mr. Manager | Smart ERP & Business Management System</p>
    </div>
  </footer>

// Modal functions
    function openModalByData(element) {
      const id = element.getAttribute('data-id');
      const section = gallery.find(s => s.id == id);
      if (!section) return;

currentIndex = gallery.findIndex(s => s.id == id);

const image = section.external_image_url || section.image_path;
      document.getElementById('modalTitle').textContent = section.title;
      document.getElementById('modalImage').src = image;
      document.getElementById('modalInfoTitle').textContent = section.title;
      document.getElementById('modalInfoDesc').textContent = section.description || 'No description available.';

document.getElementById('galleryModal').classList.add('show');
      document.body.style.overflow = 'hidden';
    }

function closeModal() {
      document.getElementById('galleryModal').classList.remove('show');
      document.body.style.overflow = 'auto';
    }

function nextImage() {
      currentIndex = (currentIndex + 1) % gallery.length;
      updateModalContent();
    }

function previousImage() {
      currentIndex = (currentIndex - 1 + gallery.length) % gallery.length;
      updateModalContent();
    }

function updateModalContent() {
      const section = gallery[currentIndex];
      const image = section.external_image_url || section.image_path;
      document.getElementById('modalTitle').textContent = section.title;
      document.getElementById('modalImage').src = image;
      document.getElementById('modalInfoTitle').textContent = section.title;
      document.getElementById('modalInfoDesc').textContent = section.description || 'No description available.';
    }

// Event listeners
    document.querySelectorAll('.open-modal').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        openModalByData(btn);
      });
    });

// Close modal on Escape key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') closeModal();
      if (e.key === 'ArrowRight') nextImage();
      if (e.key === 'ArrowLeft') previousImage();
    });

// Filter functionality
    document.querySelectorAll('.filter-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

// Click outside modal to close
    document.getElementById('galleryModal').addEventListener('click', (e) => {
      if (e.target.id === 'galleryModal') closeModal();
    });
  </script>

</body>
</html>