117 lines
3.1 KiB
PHP
117 lines
3.1 KiB
PHP
<?php
|
|
require_once 'config/db.php';
|
|
|
|
if (!isset($_GET['id'])) {
|
|
header('Location: blog.php');
|
|
exit;
|
|
}
|
|
|
|
// Obtener artículo
|
|
$stmt = $pdo->prepare("
|
|
SELECT p.*, u.nombre as autor_nombre
|
|
FROM blog_posts p
|
|
LEFT JOIN admin_users u ON p.autor_id = u.id
|
|
WHERE p.id = ? AND p.estado = 'publicado'
|
|
");
|
|
$stmt->execute([$_GET['id']]);
|
|
$post = $stmt->fetch();
|
|
|
|
if (!$post) {
|
|
header('Location: blog.php');
|
|
exit;
|
|
}
|
|
|
|
// Incrementar vistas
|
|
$stmt = $pdo->prepare("UPDATE blog_posts SET vistas = vistas + 1 WHERE id = ?");
|
|
$stmt->execute([$post['id']]);
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="es" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="<?= htmlspecialchars($post['extracto']) ?>">
|
|
<title><?= htmlspecialchars($post['titulo']) ?> | Blog Amor y Roma</title>
|
|
<link rel="stylesheet" href="style/main.css">
|
|
<style>
|
|
.articulo-header {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 4rem 2rem 2rem;
|
|
}
|
|
.articulo-imagen {
|
|
width: 100%;
|
|
max-height: 500px;
|
|
object-fit: cover;
|
|
border-radius: 16px;
|
|
margin: 2rem 0;
|
|
}
|
|
.articulo-contenido {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem 4rem;
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
}
|
|
.articulo-contenido h2,
|
|
.articulo-contenido h3 {
|
|
margin-top: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.articulo-contenido p {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.articulo-contenido img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
margin: 2rem 0;
|
|
}
|
|
.articulo-meta {
|
|
display: flex;
|
|
gap: 2rem;
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
margin: 1rem 0 2rem;
|
|
padding: 1rem 0;
|
|
border-top: 1px solid rgba(0, 63, 82, 0.12);
|
|
border-bottom: 1px solid rgba(0, 63, 82, 0.12);
|
|
}
|
|
.volver-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: #ba124d;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
margin-bottom: 2rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="menu-container"></div>
|
|
|
|
<main>
|
|
<article>
|
|
<div class="articulo-header">
|
|
<a href="blog.php" class="volver-link">← Volver al blog</a>
|
|
<span class="badge-filosofia"><?= ucfirst(htmlspecialchars($post['categoria'])) ?></span>
|
|
<h1 style="font-size: clamp(2rem, 4vw, 3rem); margin: 1rem 0;"><?= htmlspecialchars($post['titulo']) ?></h1>
|
|
<div class="articulo-meta">
|
|
<span>📅 <?= date('d de F Y', strtotime($post['created_at'])) ?></span>
|
|
<span> <?= $post['tiempo_lectura'] ?> min de lectura</span>
|
|
<span>✍️ <?= htmlspecialchars($post['autor_nombre']) ?></span>
|
|
</div>
|
|
<img src="<?= htmlspecialchars($post['imagen']) ?>" alt="<?= htmlspecialchars($post['titulo']) ?>" class="articulo-imagen">
|
|
</div>
|
|
|
|
<div class="articulo-contenido">
|
|
<?= $post['contenido'] ?>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
<div id="footer-container"></div>
|
|
<script src="scripts/main.js"></script>
|
|
</body>
|
|
</html>
|