Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
d23e8a06c4 | ||
|
|
48326c339f |
165
assets/css/custom.css
Normal file
165
assets/css/custom.css
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #f4f7f9;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
background: linear-gradient(45deg, #3498db, #2ecc71);
|
||||||
|
color: white;
|
||||||
|
padding: 4rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card img {
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card .card-body {
|
||||||
|
padding: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card .card-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card .card-text {
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card .post-meta {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #7f8c8d;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: #3498db;
|
||||||
|
border-color: #3498db;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.6rem 1.5rem;
|
||||||
|
border-radius: 50px;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: #2980b9;
|
||||||
|
border-color: #2980b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
background-color: #2c3e50;
|
||||||
|
color: #ecf0f1;
|
||||||
|
padding: 2rem 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: #3498db;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Single Post Styles */
|
||||||
|
.post-full {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 2.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-header .post-title {
|
||||||
|
font-family: 'Lora', serif;
|
||||||
|
font-size: 2.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-header .post-meta {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #7f8c8d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-featured-image {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-featured-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content {
|
||||||
|
font-family: 'Lora', serif;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #34495e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content h2, .post-content h3 {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content p {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content a {
|
||||||
|
color: #3498db;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content a:hover {
|
||||||
|
color: #2980b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-primary {
|
||||||
|
border-color: #3498db;
|
||||||
|
color: #3498db;
|
||||||
|
border-radius: 50px;
|
||||||
|
padding: 0.6rem 1.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-primary:hover {
|
||||||
|
background-color: #3498db;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
BIN
assets/images/pexels-289586.jpg
Normal file
BIN
assets/images/pexels-289586.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
BIN
assets/images/pexels-466685.jpg
Normal file
BIN
assets/images/pexels-466685.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 423 KiB |
BIN
assets/images/pexels-546819.jpg
Normal file
BIN
assets/images/pexels-546819.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
4
assets/js/main.js
Normal file
4
assets/js/main.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
// Future JavaScript for interactive elements
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
console.log('Blog loaded successfully.');
|
||||||
|
});
|
||||||
58
includes/pexels.php
Normal file
58
includes/pexels.php
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<?php
|
||||||
|
// includes/pexels.php
|
||||||
|
function pexels_key() {
|
||||||
|
$k = getenv('PEXELS_KEY');
|
||||||
|
return $k && strlen($k) > 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18';
|
||||||
|
}
|
||||||
|
function pexels_get($url) {
|
||||||
|
$ch = curl_init();
|
||||||
|
curl_setopt_array($ch, [
|
||||||
|
CURLOPT_URL => $url,
|
||||||
|
CURLOPT_RETURNTRANSFER => true,
|
||||||
|
CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ],
|
||||||
|
CURLOPT_TIMEOUT => 15,
|
||||||
|
]);
|
||||||
|
$resp = curl_exec($ch);
|
||||||
|
$code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||||
|
curl_close($ch);
|
||||||
|
if ($code >= 200 && $code < 300 && $resp) return json_decode($resp, true);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
function download_to($srcUrl, $destPath) {
|
||||||
|
// Ensure the directory exists.
|
||||||
|
$dir = dirname($destPath);
|
||||||
|
if (!is_dir($dir)) {
|
||||||
|
if (!mkdir($dir, 0775, true)) {
|
||||||
|
error_log("Failed to create directory: " . $dir);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use cURL to download the image, as file_get_contents can be restricted.
|
||||||
|
$ch = curl_init($srcUrl);
|
||||||
|
$fp = fopen($destPath, 'wb');
|
||||||
|
if (!$fp) {
|
||||||
|
error_log("Failed to open file for writing: " . $destPath);
|
||||||
|
curl_close($ch);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
curl_setopt($ch, CURLOPT_FILE, $fp);
|
||||||
|
curl_setopt($ch, CURLOPT_HEADER, 0);
|
||||||
|
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
|
||||||
|
curl_setopt($ch, CURLOPT_TIMEOUT, 60);
|
||||||
|
$result = curl_exec($ch);
|
||||||
|
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||||
|
curl_close($ch);
|
||||||
|
fclose($fp);
|
||||||
|
|
||||||
|
if ($result === false || $httpCode !== 200) {
|
||||||
|
error_log("Failed to download image from " . $srcUrl . ". HTTP code: " . $httpCode);
|
||||||
|
// Clean up the failed download
|
||||||
|
if (file_exists($destPath)) {
|
||||||
|
unlink($destPath);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
227
index.php
227
index.php
@ -1,131 +1,120 @@
|
|||||||
<?php
|
<!DOCTYPE html>
|
||||||
declare(strict_types=1);
|
|
||||||
@ini_set('display_errors', '1');
|
|
||||||
@error_reporting(E_ALL);
|
|
||||||
@date_default_timezone_set('UTC');
|
|
||||||
|
|
||||||
$phpVersion = PHP_VERSION;
|
|
||||||
$now = date('Y-m-d H:i:s');
|
|
||||||
?>
|
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>New Style</title>
|
|
||||||
|
<!-- SEO Meta Tags -->
|
||||||
|
<title>1</title>
|
||||||
|
<meta name="description" content="Built with Flatlogic Generator">
|
||||||
|
<meta name="keywords" content="clean blog, articles, updates, modern blog, web development, PHP, Bootstrap, Flatlogic">
|
||||||
|
|
||||||
|
<!-- Open Graph / Facebook -->
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="1">
|
||||||
|
<meta property="og:description" content="Built with Flatlogic Generator">
|
||||||
|
<meta property="og:image" content="">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:image" content="">
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
|
||||||
|
|
||||||
|
<!-- Stylesheets -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
<style>
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
:root {
|
|
||||||
--bg-color-start: #6a11cb;
|
|
||||||
--bg-color-end: #2575fc;
|
|
||||||
--text-color: #ffffff;
|
|
||||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
|
||||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
|
||||||
color: var(--text-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
body::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
|
||||||
animation: bg-pan 20s linear infinite;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
@keyframes bg-pan {
|
|
||||||
0% { background-position: 0% 0%; }
|
|
||||||
100% { background-position: 100% 100%; }
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
background: var(--card-bg-color);
|
|
||||||
border: 1px solid var(--card-border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.loader {
|
|
||||||
margin: 1.25rem auto 1.25rem;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
.hint {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px; height: 1px;
|
|
||||||
padding: 0; margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap; border: 0;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
|
||||||
<div class="card">
|
<?php
|
||||||
<h1>Analyzing your requirements and generating your website…</h1>
|
// Hardcoded post data as a substitute for a database
|
||||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
$posts = [
|
||||||
<span class="sr-only">Loading…</span>
|
[
|
||||||
|
"id" => 1,
|
||||||
|
"title" => "The Future of Web Development",
|
||||||
|
"excerpt" => "Exploring the latest trends and technologies shaping the web. From AI-powered tools to the rise of serverless architectures...",
|
||||||
|
"image" => "assets/images/pexels-546819.jpg",
|
||||||
|
"alt" => "Abstract technology background",
|
||||||
|
"category" => "Technology",
|
||||||
|
"date" => "September 29, 2025"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"id" => 2,
|
||||||
|
"title" => "A Guide to Mindful Productivity",
|
||||||
|
"excerpt" => "In a world of constant distractions, learn how to focus your energy, manage your time, and achieve your goals with less stress.",
|
||||||
|
"image" => "assets/images/pexels-289586.jpg",
|
||||||
|
"alt" => "A person writing in a notebook",
|
||||||
|
"category" => "Productivity",
|
||||||
|
"date" => "September 25, 2025"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"id" => 3,
|
||||||
|
"title" => "Exploring Urban Landscapes",
|
||||||
|
"excerpt" => "A photographic journey through the architectural marvels and hidden gems of the world's most vibrant cities.",
|
||||||
|
"image" => "assets/images/pexels-466685.jpg",
|
||||||
|
"alt" => "Cityscape at dusk",
|
||||||
|
"category" => "Travel",
|
||||||
|
"date" => "September 22, 2025"
|
||||||
|
]
|
||||||
|
];
|
||||||
|
?>
|
||||||
|
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
|
||||||
|
<div class="container">
|
||||||
|
<a class="navbar-brand" href="#">1</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||||
|
<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" href="#">Home</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>
|
||||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWiZZy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
</div>
|
||||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
</nav>
|
||||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
|
||||||
|
<header class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1>A Clean Blog for Your Ideas</h1>
|
||||||
|
<p class="lead">Publish updates and articles with a focus on readability and style.</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="container mt-5 mb-5">
|
||||||
|
<div class="row g-4">
|
||||||
|
<?php foreach ($posts as $post): ?>
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="card blog-card h-100">
|
||||||
|
<img src="<?php echo htmlspecialchars($post['image']); ?>" class="card-img-top" alt="<?php echo htmlspecialchars($post['alt']); ?>">
|
||||||
|
<div class="card-body d-flex flex-column">
|
||||||
|
<div class="post-meta">
|
||||||
|
<span><?php echo htmlspecialchars($post['category']); ?></span> • <span><?php echo htmlspecialchars($post['date']); ?></span>
|
||||||
|
</div>
|
||||||
|
<h5 class="card-title"><?php echo htmlspecialchars($post['title']); ?></h5>
|
||||||
|
<p class="card-text flex-grow-1"><?php echo htmlspecialchars($post['excerpt']); ?></p>
|
||||||
|
<a href="post.php?id=<?php echo $post['id']; ?>" class="btn btn-primary align-self-start">Read More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
<footer class="footer">
|
||||||
|
<div class="container text-center">
|
||||||
|
<p>© <?php echo date("Y"); ?> 1. All Rights Reserved.</p>
|
||||||
|
<p><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
130
post.php
Normal file
130
post.php
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<!-- SEO Meta Tags -->
|
||||||
|
<title>Post Title - My Blog</title>
|
||||||
|
<meta name="description" content="A detailed article about...">
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
|
||||||
|
|
||||||
|
<!-- Stylesheets -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<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=Lora:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Hardcoded post data as a substitute for a database
|
||||||
|
$posts = [
|
||||||
|
[
|
||||||
|
"id" => 1,
|
||||||
|
"title" => "The Future of Web Development",
|
||||||
|
"content" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>",
|
||||||
|
"image" => "assets/images/pexels-546819.jpg",
|
||||||
|
"alt" => "Abstract technology background",
|
||||||
|
"category" => "Technology",
|
||||||
|
"date" => "September 29, 2025",
|
||||||
|
"author" => "Admin"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"id" => 2,
|
||||||
|
"title" => "A Guide to Mindful Productivity",
|
||||||
|
"content" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>",
|
||||||
|
"image" => "assets/images/pexels-289586.jpg",
|
||||||
|
"alt" => "A person writing in a notebook",
|
||||||
|
"category" => "Productivity",
|
||||||
|
"date" => "September 25, 2025",
|
||||||
|
"author" => "Admin"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"id" => 3,
|
||||||
|
"title" => "Exploring Urban Landscapes",
|
||||||
|
"content" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>",
|
||||||
|
"image" => "assets/images/pexels-466685.jpg",
|
||||||
|
"alt" => "Cityscape at dusk",
|
||||||
|
"category" => "Travel",
|
||||||
|
"date" => "September 22, 2025",
|
||||||
|
"author" => "Admin"
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
$postId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
|
||||||
|
$post = null;
|
||||||
|
foreach ($posts as $p) {
|
||||||
|
if ($p['id'] === $postId) {
|
||||||
|
$post = $p;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Redirect to home if post not found
|
||||||
|
if ($post === null) {
|
||||||
|
header("Location: /");
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
|
||||||
|
<div class="container">
|
||||||
|
<a class="navbar-brand" href="/">My Blog</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||||
|
<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="#">About</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="container mt-5 mb-5">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<article class="post-full">
|
||||||
|
<header class="post-header">
|
||||||
|
<div class="post-meta mb-2">
|
||||||
|
<span><?php echo htmlspecialchars($post['category']); ?></span>
|
||||||
|
</div>
|
||||||
|
<h1 class="post-title"><?php echo htmlspecialchars($post['title']); ?></h1>
|
||||||
|
<div class="post-meta">
|
||||||
|
By <?php echo htmlspecialchars($post['author']); ?> • <?php echo htmlspecialchars($post['date']); ?>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<figure class="post-featured-image my-4">
|
||||||
|
<img src="<?php echo htmlspecialchars($post['image']); ?>" alt="<?php echo htmlspecialchars($post['alt']); ?>">
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<section class="post-content">
|
||||||
|
<?php echo $post['content']; // Content is sanitized in a real app ?>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="post-footer mt-5">
|
||||||
|
<a href="/" class="btn btn-outline-primary">Back to Blog</a>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container text-center">
|
||||||
|
<p>© <?php echo date("Y"); ?> My Blog. All Rights Reserved.</p>
|
||||||
|
<p><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user