Devco1 Shell

/ home / aptodayn / varthaprapancham.com /
Filename : gallery.php
back
<?php
include __DIR__ . "/config/db.php";
include __DIR__ . "/config/site.php";
include __DIR__ . "/includes/header.php";
$galleries = $conn->query("
  SELECT id,title,cover_image 
  FROM gallery 
  WHERE status='published'
  ORDER BY id DESC
");
?>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anek+Telugu:wght@100;200;300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

<style>
:root{
  --fbd: 'Anek Telugu', 'Inter', system-ui, sans-serif;
}

html, body { 
  overflow-x:hidden; 
  background-color: #050505; 
  font-family: var(--fbd);
  -webkit-font-smoothing: antialiased;
}

@media(max-width:960px){
  body { padding-bottom: 85px !important; }
}

.gallery-wrap{
  max-width:1400px;
  margin:auto;
  padding:40px 16px 80px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(310px, 1fr));
  gap:25px;
}

.gallery-card {
  background: #111; 
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
  border-bottom: 3px solid rgba(255, 255, 255, 0.1); 
}

.gallery-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.gallery-img-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
  background: #1a1a1a;
}

.gallery-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-card:hover img { transform: scale(1.08); }

/* --- FOOTER MENU COLORS FOR GALLERY TITLES --- */

.gallery-title {
  padding: 22px 15px 20px;
  font-size: 19px;
  font-weight: 800;
  font-family: var(--fbd);
  text-align: center;
  line-height: 1.6;
  text-transform: uppercase;
}

/* 1. Pink Color (Like Gallery Icon) */
.gallery-card:nth-child(3n+1) .gallery-title {
  color: #e1306c;
}
.gallery-card:nth-child(3n+1) {
  border-bottom: 3px solid #e1306c;
}

/* 2. Gradient Color (Like Reels Icon) */
.gallery-card:nth-child(3n+2) .gallery-title {
  background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gallery-card:nth-child(3n+2) {
  border-bottom: 3px solid #dd2a7b;
}

/* 3. Dark Blue Color (Like Home/ePaper Icon) */
.gallery-card:nth-child(3n+3) .gallery-title {
  color: #0b3b7a;
}
.gallery-card:nth-child(3n+3) {
  border-bottom: 3px solid #0b3b7a;
}

@media(max-width:480px){
  .gallery-wrap { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gallery-title { font-size: 15px; padding: 14px 8px 12px; }
}
</style>

<div class="gallery-wrap">
<?php while($g = $galleries->fetch_assoc()): ?>
  <?php
    $file_name = htmlspecialchars($g['cover_image']);
    $version = time(); 
  ?>
  <a href="<?= $BASE_URL ?>/gallery_view.php?id=<?= $g['id'] ?>" class="gallery-card">
    <div class="gallery-img-wrap">
      <img 
        src="<?= $BASE_URL ?>/admin/uploads/gallery/images/<?= $file_name ?>?v=<?= $version ?>"
        alt="<?= htmlspecialchars($g['title']) ?>"
        loading="lazy"
      >
    </div>
    <div class="gallery-title"><?= htmlspecialchars($g['title']) ?></div>
  </a>
<?php endwhile; ?>
</div>

<?php include __DIR__ . "/includes/footer.php"; ?>