91 lines
4.1 KiB
PHP
91 lines
4.1 KiB
PHP
<?php
|
|
require_once 'db/config.php';
|
|
$db = db();
|
|
$stmt = $db->query("SELECT * FROM posts ORDER BY created_at DESC");
|
|
$posts = $stmt->fetchAll();
|
|
|
|
$projectName = $_SERVER['PROJECT_NAME'] ?? 'Our Blog';
|
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Sharing updates and insights on design and technology.';
|
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&q=80&w=1000';
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title><?= htmlspecialchars($projectName) ?></title>
|
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<meta property="og:title" content="<?= htmlspecialchars($projectName) ?>" />
|
|
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
<meta property="twitter:card" content="summary_large_image" />
|
|
<meta property="twitter:title" content="<?= htmlspecialchars($projectName) ?>" />
|
|
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
|
|
<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=Inter:wght@400;500;600;700&family=Outfit:wght@500;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
|
|
</head>
|
|
<body>
|
|
<div class="bg-shapes">
|
|
<canvas id="bg-canvas"></canvas>
|
|
<div class="shape shape-1" data-speed="2"></div>
|
|
<div class="shape shape-2" data-speed="-1.5"></div>
|
|
<div class="shape shape-mouse"></div>
|
|
</div>
|
|
|
|
<header>
|
|
<div class="container nav">
|
|
<a href="index.php" class="logo"><?= htmlspecialchars($projectName) ?></a>
|
|
<div class="nav-links">
|
|
<a href="index.php">Home</a>
|
|
<a href="admin/index.php">Admin</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero">
|
|
<div class="container">
|
|
<h1>Welcome to <span style="background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"><?= htmlspecialchars($projectName) ?></span></h1>
|
|
<p class="subtitle"><?= htmlspecialchars($projectDescription) ?></p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container">
|
|
<div class="post-grid">
|
|
<?php foreach ($posts as $post): ?>
|
|
<a href="post.php?slug=<?= htmlspecialchars($post['slug']) ?>" class="post-card">
|
|
<?php if ($post['image_url']): ?>
|
|
<div class="post-card-image" style="background-image: url('<?= htmlspecialchars($post['image_url']) ?>')"></div>
|
|
<?php else: ?>
|
|
<div class="post-card-image" style="background-image: url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&q=80&w=800')"></div>
|
|
<?php endif; ?>
|
|
|
|
<div class="post-card-content">
|
|
<div class="post-card-date"><?= date('M j, Y', strtotime($post['created_at'])) ?></div>
|
|
<h2 class="post-card-title"><?= htmlspecialchars($post['title']) ?></h2>
|
|
<p class="post-card-summary"><?= htmlspecialchars($post['summary']) ?></p>
|
|
</div>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
<?php if (empty($posts)): ?>
|
|
<div style="text-align: center; padding: 4rem; background: var(--surface-solid); border-radius: var(--radius-lg); border: 1px dashed var(--border);">
|
|
<h3>No posts yet.</h3>
|
|
<p class="subtitle">Head to the Admin panel to write your first article.</p>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© <?= date('Y') ?> <?= htmlspecialchars($projectName) ?>. Beautifully crafted with Flatlogic AI.</p>
|
|
</div>
|
|
</footer>
|
|
<script src="assets/js/main.js?v=<?= time() ?>"></script>
|
|
</body>
|
|
</html>
|