<?php
session_start();
require_once 'admin-panal/includes/db.php';
$slug = $_GET['slug'] ?? '';
if (!$slug) {
header("Location: blogs.php");
exit;
}
$stmt = $pdo->prepare("SELECT * FROM blogs WHERE slug = ? AND is_published = 1");
$stmt->execute([$slug]);
$blog = $stmt->fetch();
if (!$blog) {
header("Location: blogs.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z2X2T395KZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Z2X2T395KZ');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?= htmlspecialchars($blog['title']) ?> — Elegance of India</title>
<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=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<style>
body {
font-family: 'Roboto', sans-serif;
color: #444;
line-height: 1.8;
}
.blog-header {
text-align: center;
max-width: 800px;
margin: 0 auto 40px;
padding: 80px 20px 0;
}
.blog-date {
color: #c9a96e;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 15px;
}
.blog-title {
font-family: 'Playfair Display', serif;
font-size: 3rem;
line-height: 1.2;
color: #111;
margin-bottom: 20px;
}
.blog-intro {
font-size: 1.25rem;
color: #666;
max-width: 1000px;
margin: 0 auto 30px;
line-height: 1.6;
text-align: center;
}
.blog-hero-img {
width: 100%;
max-width: 1000px;
height: auto;
max-height: 550px;
object-fit: cover;
border-radius: 8px;
margin: 0 auto 50px;
display: block;
}
.blog-content {
max-width: 1000px;
margin: 0 auto;
font-size: 1.1rem;
line-height: 1.8;
color: #444;
}
.blog-content p {
margin-bottom: 25px;
}
.blog-content h2, .blog-content h3 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
color: #111;
margin-top: 40px;
margin-bottom: 20px;
line-height: 1.3;
}
.blog-content h2 { font-size: 2rem; }
.blog-content h3 { font-size: 1.5rem; }
.blog-content blockquote {
border-left: 3px solid #c9a96e;
padding-left: 20px;
font-style: italic;
font-size: 1.2rem;
color: #555;
margin: 40px 0;
background: #fafafa;
padding: 30px;
border-radius: 0 8px 8px 0;
}
.blog-content img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 20px 0;
}
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #111;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 1px;
margin-bottom: 40px;
transition: color 0.3s;
}
.back-link:hover {
color: #c9a96e;
}
</style>
</head>
<body>
<?php include 'inc/header.php'; ?>
<main style="background: #fff; padding-bottom: 100px;">
<div class="container">
<div class="blog-header">
<div class="blog-date"><?= date('F j, Y', strtotime($blog['created_at'])) ?></div>
<h1 class="blog-title"><?= htmlspecialchars($blog['title']) ?></h1>
<?php if (!empty($blog['short_description'])): ?>
<p class="blog-intro"><?= htmlspecialchars($blog['short_description']) ?></p>
<?php endif; ?>
</div>
<?php if (!empty($blog['image_url'])): ?>
<img src="<?= htmlspecialchars($blog['image_url']) ?>" alt="<?= htmlspecialchars($blog['title']) ?>" class="blog-hero-img" />
<?php endif; ?>
<div class="blog-content">
<?= $blog['content'] ?>
<div style="margin-top: 60px; padding-top: 40px; border-top: 1px solid #eee;">
<a href="blogs.php" class="back-link">
<i class="fas fa-arrow-left"></i> Back to Journal
</a>
</div>
</div>
</div>
</main>
<?php include 'inc/footer.php'; ?>
</body>
</html>