103 lines
5.0 KiB
PHP
103 lines
5.0 KiB
PHP
<?php
|
|
require_once 'db/config.php';
|
|
|
|
$pdo = db();
|
|
$stmt = $pdo->query("SELECT * FROM products");
|
|
$products = $stmt->fetchAll();
|
|
|
|
$project_name = !empty($_SERVER['PROJECT_NAME']) ? $_SERVER['PROJECT_NAME'] : 'Tabeltop Decor';
|
|
$project_description = !empty($_SERVER['PROJECT_DESCRIPTION']) ? $_SERVER['PROJECT_DESCRIPTION'] : 'An e-commerce site for tabletop decoration products.';
|
|
$project_image_url = !empty($_SERVER['PROJECT_IMAGE_URL']) ? $_SERVER['PROJECT_IMAGE_URL'] : '';
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?= htmlspecialchars($project_name) ?></title>
|
|
<meta name="description" content="<?= htmlspecialchars($project_description) ?>">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="<?= htmlspecialchars($project_name) ?>">
|
|
<meta property="og:description" content="<?= htmlspecialchars($project_description) ?>">
|
|
<meta property="og:image" content="<?= htmlspecialchars($project_image_url) ?>">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:title" content="<?= htmlspecialchars($project_name) ?>">
|
|
<meta property="twitter:description" content="<?= htmlspecialchars($project_description) ?>">
|
|
<meta property="twitter:image" content="<?= htmlspecialchars($project_image_url) ?>">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
<script src="https://unpkg.com/feather-icons"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#"><?= htmlspecialchars($project_name) ?></a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Shop</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">About</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container my-5">
|
|
<div class="row">
|
|
<?php foreach ($products as $product): ?>
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card product-card h-100">
|
|
<img src="<?= htmlspecialchars($product['image_url']) ?>" class="card-img-top" alt="<?= htmlspecialchars($product['name']) ?>">
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="card-title"><?= htmlspecialchars($product['name']) ?></h5>
|
|
<p class="card-text flex-grow-1"><?= htmlspecialchars($product['description']) ?></p>
|
|
<p class="card-text fs-4 fw-bold">$<?= htmlspecialchars($product['price']) ?></p>
|
|
<div class="mt-auto">
|
|
<button class="btn btn-primary w-100" data-bs-toggle="tooltip" title="Coming Soon!">Add to Cart</button>
|
|
<button class="btn btn-outline-secondary w-100 mt-2" data-bs-toggle="tooltip" title="Coming Soon!">
|
|
<i data-feather="heart"></i> Add to Wishlist
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="bg-light py-4 mt-auto">
|
|
<div class="container text-center">
|
|
<p class="footer-text mb-0">© <?= date('Y') ?> <?= htmlspecialchars($project_name) ?>. All Rights Reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
feather.replace()
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl)
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|