File manager - Edit - /home/monara/public_html/swarnawahini_web/pages/teledramas.php
Back
<?php include __DIR__ . '/../components/db_connect.php'; include_once __DIR__ . '/../components/functions.php'; require '../components/header.php'; $api_key = 'AIzaSyBAON_ChCgF5BEXX7ijp--GImeRmAHdUBY'; $page = isset($_GET['page']) ? (int)$_GET['page'] : 1; if ($page < 1) { $page = 1; // ensure page is always at least 1 } $items_per_page = 20; $offset = ($page - 1) * $items_per_page; $total_items = 0; $teledramas = []; if ($conn instanceof PDO) { $total_stmt = $conn->query("SELECT COUNT(*) FROM teledramas"); $total_items = $total_stmt->fetchColumn(); $stmt = $conn->prepare("SELECT * FROM teledramas ORDER BY sort_order ASC LIMIT :limit OFFSET :offset"); $stmt->bindValue(':limit', $items_per_page, PDO::PARAM_INT); $stmt->bindValue(':offset', $offset, PDO::PARAM_INT); $stmt->execute(); $teledramas = $stmt->fetchAll(PDO::FETCH_ASSOC); } elseif ($conn instanceof mysqli) { $result = $conn->query("SELECT COUNT(*) as total FROM teledramas"); $row = $result->fetch_assoc(); $total_items = $row['total'] ?? 0; $stmt = $conn->prepare("SELECT * FROM teledramas ORDER BY sort_order ASC LIMIT ? OFFSET ?"); $stmt->bind_param("ii", $items_per_page, $offset); $stmt->execute(); $result = $stmt->get_result(); while ($row = $result->fetch_assoc()) { $teledramas[] = $row; } } $total_pages = ceil($total_items / $items_per_page); // Build episode counts in one query (avoid N+1) $counts = []; $ids = array_column($teledramas, 'id'); if (!empty($ids)) { if ($conn instanceof PDO) { // prepare IN placeholders $placeholders = implode(',', array_fill(0, count($ids), '?')); $stmt = $conn->prepare("SELECT teledrama_id, COUNT(*) AS cnt FROM teledrama_videos WHERE teledrama_id IN ($placeholders) GROUP BY teledrama_id"); $stmt->execute($ids); $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); foreach ($rows as $r) $counts[$r['teledrama_id']] = (int)$r['cnt']; } elseif ($conn instanceof mysqli) { // safe integer list $safeIds = array_map('intval', $ids); $in = implode(',', $safeIds); $res = $conn->query("SELECT teledrama_id, COUNT(*) AS cnt FROM teledrama_videos WHERE teledrama_id IN ($in) GROUP BY teledrama_id"); while ($r = $res->fetch_assoc()) $counts[$r['teledrama_id']] = (int)$r['cnt']; } } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teledramas | Swarnawahini</title> <style> /* Global Reset and Base Styles */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Poppins, sans-serif; background: rgb(25, 52, 134); margin: 0; padding: 90px 0 0; overflow-x: hidden; } /* Teledrama Container */ .container.ts { max-width: 1200px; margin: 40px auto; padding: 20px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); color: white; position: relative; /* Added for absolute positioning of button */ } /* Top Right Button */ .top-right-btn { position: absolute; top: 20px; right: 20px; background-color: #FFC107; color: #1A237E; padding: 8px 15px; border-radius: 15px; font-family: 'Poppins', sans-serif; font-weight: bold; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; border: none; cursor: pointer; } .top-right-btn:hover { background-color: #ff0000; color: #1A237E; transform: scale(1.05); } /* Page Title */ .page-title { text-align: center; margin-bottom: 30px; font-size: 2rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); color: white; } /* Row and Grid for Controlled Horizontal Layout */ .row { display: grid; grid-template-columns: repeat(3, 1fr); /* Enforce 3 columns */ gap: 1.5rem; /* Match gutter-x */ justify-content: center; padding: 0 0.75rem; /* Half of gutter-x for edge spacing */ } .col { display: flex; justify-content: center; } /* Cards */ .card { background: rgba(255, 255, 255, 0.08); /* more transparent */ backdrop-filter: blur(20px) saturate(200%); -webkit-backdrop-filter: blur(20px) saturate(200%); border-radius: 20px; /* smoother corners */ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* deeper shadow for contrast */ border: 1px solid rgba(255, 255, 255, 0.15); /* subtle border */ overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; width: 100%; max-width: 350px; background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 100% ); /* subtle glossy overlay */ } .card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4); background: rgba(255, 255, 255, 0.12); background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.03) 100% ); } .card-img-top { border-top-left-radius: 15px; border-top-right-radius: 15px; width: 100%; height: 200px; object-fit: cover; } .card-body { padding: 15px; color: white; } .card-text { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 16px; color: #ecf0f1; margin-bottom: 15px; } .btn.btn-primary { display: inline-flex; align-items: center; background-color: #FFC107; color: #1A237E; padding: 8px 15px; border-radius: 15px; font-family: 'Poppins', sans-serif; font-weight: bold; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; border: none; } .btn.btn-primary:hover { background-color: #ff0000; color: #1A237E; transform: scale(1.05); text-decoration: none; } /* Updated Pagination */ .pagination { margin-top: 2rem; display: flex; justify-content: center; gap: 0.5rem; /* Space between items */ } .pagination .page-link { color: #1A237E; background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 25, 118, 0.2); padding: 8px 15px; min-width: 40px; text-align: center; border-radius: 50px; /* Fully rounded corners */ transition: background-color 0.3s ease, transform 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .pagination .page-item.active .page-link { background-color: #FFC107; color: #1A237E; border-color: #FFC107; transform: scale(1.1); /* Slight scale on active */ } .pagination .page-item.disabled .page-link { background-color: rgba(255, 255, 255, 0.5); color: #6c757d; opacity: 0.7; cursor: not-allowed; } .pagination .page-link:hover { background-color: #ff0000; color: #ffffff; transform: scale(1.05); /* Slight scale on hover */ } /* Responsive Adjustments */ @media (max-width: 991px) { .container.ts { border-radius: 10px; } .page-title { font-size: 1.5rem; } .row { grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens */ } .card { border-radius: 10px; max-width: 350px; } .card-img-top { height: 150px; } .pagination .page-link { padding: 6px 12px; min-width: 35px; } .top-right-btn { padding: 6px 12px; font-size: 14px; } } @media (max-width: 576px) { .container.ts { border-radius: 8px; } .page-title { font-size: 1.25rem; } .row { grid-template-columns: 1fr; /* Single column on small screens */ } .card { border-radius: 8px; max-width: 100%; /* Full width on mobile */ } .card-img-top { height: 120px; } .card-body { padding: 10px; } .card-text { font-size: 14px; } .btn.btn-primary { padding: 6px 12px; font-size: 14px; } .pagination .page-link { padding: 5px 10px; min-width: 30px; } .top-right-btn { padding: 5px 10px; font-size: 12px; top: 10px; right: 10px; } } </style> </head> <body> <div class="container ts"> <div class="teledrama-container"> <h1 class="page-title"><?php echo isset($page_title) ? $page_title : 'Teledramas'; ?></h1> <div class="row g-4 justify-content-center"> <?php foreach ($teledramas as $row): ?> <?php $thumbnail = $row['thumbnail']; ?> <div class="col"> <div class="card"> <img src="<?php echo htmlspecialchars($thumbnail); ?>" class="card-img-top" alt="<?php echo htmlspecialchars($row['title']); ?>" style="width:100%; height:auto; object-fit:contain;"> <div class="card-body"> <p class="card-text"><?php echo htmlspecialchars($row['description']); ?></p> <a href="/teledrama_detail.php?id=<?php echo $row['id']; ?>" class="btn btn-primary"><?php echo htmlspecialchars($row['title']); ?></a> </div> </div> </div> <?php endforeach; ?> </div> <?php if ($total_pages > 1): ?> <nav aria-label="Teledrama pagination" class="mt-4"> <ul class="pagination justify-content-center"> <li class="page-item <?php echo $page <= 1 ? 'disabled' : ''; ?>"> <a class="page-link" href="?page=<?php echo $page - 1; ?>" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <?php for ($i = 1; $i <= $total_pages; $i++): ?> <li class="page-item <?php echo $page === $i ? 'active' : ''; ?>"> <a class="page-link" href="?page=<?php echo $i; ?>"><?php echo $i; ?></a> </li> <?php endfor; ?> <li class="page-item <?php echo $page >= $total_pages ? 'disabled' : ''; ?>"> <a class="page-link" href="?page=<?php echo $page + 1; ?>" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> <?php endif; ?> </div> </div> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.01 |
proxy
|
phpinfo
|
Settings