129 lines
6.1 KiB
PHP
129 lines
6.1 KiB
PHP
<?php
|
|
// index.php
|
|
|
|
// --- Initialize Database ---
|
|
// This should run once to set up the database and tables.
|
|
// In a real application, this would be part of a deployment script,
|
|
// but for simplicity, we include it here and ensure it's idempotent.
|
|
require_once __DIR__ . '/db/setup.php';
|
|
setup_database();
|
|
|
|
// --- Fetch Products ---
|
|
$products = [];
|
|
$db_error = null;
|
|
try {
|
|
$pdo = db_connect();
|
|
if ($pdo) {
|
|
$stmt = $pdo->query('SELECT id, name, description, price, image_url FROM products ORDER BY created_at DESC');
|
|
$products = $stmt->fetchAll();
|
|
} else {
|
|
$db_error = "Could not connect to the database.";
|
|
}
|
|
} catch (Exception $e) {
|
|
$db_error = "Error fetching products: " . $e->getMessage();
|
|
error_log($db_error);
|
|
}
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TechCore - Cutting-Edge Technology Products</title>
|
|
<meta name="description" content="Your one-stop shop for the latest and greatest in technology. Laptops, smartphones, VR, and more.">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://your-domain.com/">
|
|
<meta property="og:title" content="TechCore - Cutting-Edge Technology Products">
|
|
<meta property="og:description" content="Explore the future of tech. High-performance gadgets for work, play, and everything in between.">
|
|
<meta property="og:image" content="https://picsum.photos/seed/tech-og/1200/630">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:url" content="https://your-domain.com/">
|
|
<meta property="twitter:title" content="TechCore - Cutting-Edge Technology Products">
|
|
<meta property="twitter:description" content="Explore the future of tech. High-performance gadgets for work, play, and everything in between.">
|
|
<meta property="twitter:image" content="https://picsum.photos/seed/tech-og/1200/630">
|
|
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Bootstrap Icons -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent position-absolute top-0 start-0 w-100">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold" href="#">TechCore</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" href="#">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#products">Products</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>
|
|
<a href="#" class="btn btn-primary ms-lg-3"><i class="bi bi-cart"></i> Cart</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<header class="hero-section text-center">
|
|
<div class="container">
|
|
<h1 class="display-4">Cutting-Edge Tech</h1>
|
|
<p class="lead col-lg-6 mx-auto">Explore the future of technology. High-performance gadgets for work, play, and everything in between.</p>
|
|
<a href="#products" class="btn btn-primary btn-lg mt-3">Shop Now</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Products Section -->
|
|
<main id="products" class="container my-5">
|
|
<h2 class="text-center mb-5">Our Products</h2>
|
|
|
|
<?php if ($db_error): ?>
|
|
<div class="alert alert-danger">Error: <?php echo htmlspecialchars($db_error); ?>. Please check server logs.</div>
|
|
<?php elseif (empty($products)): ?>
|
|
<div class="alert alert-info">No products found. The admin can add products to the inventory.</div>
|
|
<?php else: ?>
|
|
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
|
|
<?php foreach ($products as $product): ?>
|
|
<div class="col">
|
|
<div class="card h-100 product-card">
|
|
<img src="<?php echo htmlspecialchars($product['image_url']); ?>" class="card-img-top" alt="<?php echo htmlspecialchars($product['name']); ?>">
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="card-title"><?php echo htmlspecialchars($product['name']); ?></h5>
|
|
<p class="card-text flex-grow-1"><?php echo htmlspecialchars($product['description']); ?></p>
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<p class="product-price mb-0">$<?php echo htmlspecialchars($product['price']); ?></p>
|
|
<a href="#" class="btn btn-primary add-to-cart-btn">Add to Cart</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer text-center">
|
|
<div class="container">
|
|
<p class="mb-0">© <?php echo date('Y'); ?> TechCore. All Rights Reserved.</p>
|
|
<p><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap 5 JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|