Sindbad~EG File Manager
<!DOCTYPE html>
<html lang="en">
<?php
// Include your database connection
include 'conn.php';
// --- 1. SETTINGS & DEFAULTS ---
// !! IMPORTANT: SET YOUR WEBSITE'S BASE URL HERE
$base_url = 'https://www.example.com'; // Change this to your live domain
// Set the unique key for this page (from the 'seo_meta' table)
$page_key = 'home';
// Set default values for mandatory tags
$default_title = 'JAM ON | Your Home For Urban Music';
$default_description = 'Jam-On FM brings you the best in nonstop music, fresh hits, and smooth vibes. Tune in anytime, anywhere.';
// --- 2. FETCH SEO DATA ---
// Fetch Global Site-Wide Settings (from id=1)
$global_seo = [];
$global_res = $mysqli->query("SELECT * FROM seo_global WHERE id = 1");
if ($global_res && $global_res->num_rows > 0) {
$global_seo = $global_res->fetch_assoc();
}
// Fetch Page-Specific Settings
$page_seo = [];
$stmt = $mysqli->prepare("SELECT * FROM seo_meta WHERE page_key = ?");
$stmt->bind_param("s", $page_key);
$stmt->execute();
$page_res = $stmt->get_result();
if ($page_res && $page_res->num_rows > 0) {
$page_seo = $page_res->fetch_assoc();
}
// --- 3. HELPER FUNCTION ---
/**
* Echoes a meta tag only if the content is not empty.
* @param string $tag The full HTML tag (e.g., '<meta name="author" content="...">')
* @param string $content The database value. If empty, nothing is echoed.
*/
function echo_tag($tag, $content) {
if (!empty(trim($content ?? ''))) {
echo $tag . "\n";
}
}
/**
* Creates an absolute URL.
* @param string $base_url Your site's base URL
* @param string $path The path from the database (e.g., 'uploads/seo/image.jpg')
* @return string The full, absolute URL
*/
function absolute_url($base_url, $path) {
if (empty($path)) return '';
// Check if path is already a full URL
if (strpos($path, 'http') === 0) {
return $path;
}
// Create full URL
return rtrim($base_url, '/') . '/' . ltrim($path, '/');
}
// --- 4. MERGE & PREPARE VALUES ---
// Page Title (Mandatory)
$title = !empty($page_seo['title']) ? $page_seo['title'] : $default_title;
// Meta Description (Mandatory)
$description = !empty($page_seo['meta_description']) ? $page_seo['meta_description'] : $default_description;
// Canonical (Page-specific, fallback to base URL for home)
$canonical = $page_seo['canonical'] ?? $base_url . '/';
// Open Graph
$og_title = $page_seo['og_title'] ?? $title;
$og_description = $page_seo['og_description'] ?? $description;
$og_url = $page_seo['og_url'] ?? $canonical;
$og_image_path = $page_seo['og_image'] ?? '';
$og_image_url = absolute_url($base_url, $og_image_path);
// Twitter
$tw_title = $page_seo['twitter_title'] ?? $og_title;
$tw_description = $page_seo['twitter_description'] ?? $og_description;
$tw_image_path = $page_seo['twitter_image'] ?? $og_image_path;
$tw_image_url = absolute_url($base_url, $tw_image_path);
?>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en">
<meta http-equiv="Content-Language" content="en">
<title><?php echo htmlspecialchars($title); ?></title>
<meta name="description" content="<?php echo htmlspecialchars($description); ?>">
<?php
// --- Optional Basic Tags ---
echo_tag('<meta name="keywords" content="' . htmlspecialchars($page_seo['meta_keywords'] ?? '') . '">', $page_seo['meta_keywords'] ?? '');
echo_tag('<meta name="author" content="' . htmlspecialchars($global_seo['author'] ?? '') . '">', $global_seo['author'] ?? '');
echo_tag('<meta name="copyright" content="' . htmlspecialchars($global_seo['copyright'] ?? '') . '">', $global_seo['copyright'] ?? '');
echo_tag('<link rel="canonical" href="' . htmlspecialchars($canonical) . '">', $canonical);
// --- Robots / Indexing ---
echo_tag('<meta name="robots" content="' . htmlspecialchars($page_seo['robots'] ?? 'index, follow') . '">', $page_seo['robots'] ?? '');
echo_tag('<meta name="googlebot" content="' . htmlspecialchars($page_seo['robots'] ?? 'index, follow') . '">', $page_seo['robots'] ?? '');
echo_tag('<meta name="bingbot" content="' . htmlspecialchars($page_seo['robots'] ?? 'index, follow') . '">', $page_seo['robots'] ?? '');
echo '<meta name="referrer" content="no-referrer-when-downgrade">' . "\n";
// --- Verification Codes (Global) ---
echo_tag('<meta name="google-site-verification" content="' . htmlspecialchars($global_seo['google_verification'] ?? '') . '">', $global_seo['google_verification'] ?? '');
echo_tag('<meta name="msvalidate.01" content="' . htmlspecialchars($global_seo['bing_verification'] ?? '') . '">', $global_seo['bing_verification'] ?? '');
echo_tag('<meta name="yandex-verification" content="' . htmlspecialchars($global_seo['yandex_verification'] ?? '') . '">', $global_seo['yandex_verification'] ?? '');
echo_tag('<meta name="facebook-domain-verification" content="' . htmlspecialchars($global_seo['facebook_verification'] ?? '') . '">', $global_seo['facebook_verification'] ?? '');
// --- Open Graph (Facebook/LinkedIn) ---
echo_tag('<meta property="og:title" content="' . htmlspecialchars($og_title) . '">', $og_title);
echo_tag('<meta property="og:description" content="' . htmlspecialchars($og_description) . '">', $og_description);
echo_tag('<meta property="og:type" content="' . htmlspecialchars($page_seo['og_type'] ?? 'website') . '">', $page_seo['og_type'] ?? 'website');
echo_tag('<meta property="og:url" content="' . htmlspecialchars($og_url) . '">', $og_url);
echo_tag('<meta property="og:image" content="' . htmlspecialchars($og_image_url) . '">', $og_image_url);
echo_tag('<meta property="og:site_name" content="' . htmlspecialchars($global_seo['site_name'] ?? '') . '">', $global_seo['site_name'] ?? '');
echo_tag('<meta property="fb:app_id" content="' . htmlspecialchars($global_seo['fb_app_id'] ?? '') . '">', $global_seo['fb_app_id'] ?? '');
echo_tag('<meta property="article:published_time" content="' . (!empty($page_seo['article_published_time']) ? htmlspecialchars(date(DateTime::ISO8601, strtotime($page_seo['article_published_time']))) : '') . '">', $page_seo['article_published_time'] ?? '');
echo_tag('<meta property="article:modified_time" content="' . (!empty($page_seo['article_modified_time']) ? htmlspecialchars(date(DateTime::ISO8601, strtotime($page_seo['article_modified_time']))) : '') . '">', $page_seo['article_modified_time'] ?? '');
echo '<meta property="og:locale" content="en_US">' . "\n";
// --- Twitter Card ---
echo_tag('<meta name="twitter:card" content="' . htmlspecialchars($page_seo['twitter_card'] ?? 'summary_large_image') . '">', $page_seo['twitter_card'] ?? '');
echo_tag('<meta name="twitter:title" content="' . htmlspecialchars($tw_title) . '">', $tw_title);
echo_tag('<meta name="twitter:description" content="' . htmlspecialchars($tw_description) . '">', $tw_description);
echo_tag('<meta name="twitter:image" content="' . htmlspecialchars($tw_image_url) . '">', $tw_image_url);
echo_tag('<meta name="twitter:site" content="' . htmlspecialchars($global_seo['twitter_site'] ?? '') . '">', $global_seo['twitter_site'] ?? '');
echo_tag('<meta name="twitter:creator" content="' . htmlspecialchars($page_seo['twitter_creator'] ?? '') . '">', $page_seo['twitter_creator'] ?? '');
// --- Favicons & Manifest (Global) ---
$favicon_url = absolute_url($base_url, $global_seo['favicon_ico'] ?? 'favicon.ico');
echo '<link rel="icon" href="' . htmlspecialchars($favicon_url) . '" type="image/x-icon">' . "\n";
echo_tag('<link rel="apple-touch-icon" sizes="180x180" href="' . absolute_url($base_url, $global_seo['apple_touch_icon'] ?? '') . '">', $global_seo['apple_touch_icon'] ?? '');
echo_tag('<link rel="manifest" href="' . absolute_url($base_url, $global_seo['manifest_url'] ?? '') . '">', $global_seo['manifest_url'] ?? '');
echo_tag('<meta name="theme-color" content="' . htmlspecialchars($global_seo['theme_color'] ?? '') . '">', $global_seo['theme_color'] ?? '');
echo_tag('<meta name="application-name" content="' . htmlspecialchars($global_seo['site_name'] ?? '') . '">', $global_seo['site_name'] ?? '');
// --- Geo & Local (Global) ---
echo_tag('<meta name="geo.region" content="' . htmlspecialchars($global_seo['geo_region'] ?? '') . '">', $global_seo['geo_region'] ?? '');
echo_tag('<meta name="geo.placename" content="' . htmlspecialchars($global_seo['geo_placename'] ?? '') . '">', $global_seo['geo_placename'] ?? '');
echo_tag('<meta name="geo.position" content="' . htmlspecialchars($global_seo['geo_position'] ?? '') . '">', $global_seo['geo_position'] ?? '');
// --- Sitemap (Global) ---
echo_tag('<link rel="sitemap" type="application/xml" title="Sitemap" href="' . htmlspecialchars($global_seo['sitemap_url'] ?? '') . '">', $global_seo['sitemap_url'] ?? '');
// --- Hreflang (Global) ---
echo_tag('<link rel="alternate" href="' . htmlspecialchars($global_seo['hreflang_x_default'] ?? '') . '" hreflang="x-default">', $global_seo['hreflang_x_default'] ?? '');
echo_tag('<link rel="alternate" href="' . htmlspecialchars($global_seo['hreflang_en'] ?? '') . '" hreflang="en">', $global_seo['hreflang_en'] ?? '');
echo_tag('<link rel="alternate" href="' . htmlspecialchars($global_seo['hreflang_es'] ?? '') . '" hreflang="es">', $global_seo['hreflang_es'] ?? '');
echo_tag('<link rel="alternate" href="' . htmlspecialchars($global_seo['hreflang_fr'] ?? '') . '" hreflang="fr">', $global_seo['hreflang_fr'] ?? '');
// --- Schema.org JSON-LD (Page-specific) ---
if (!empty($page_seo['schema_json'])) {
echo "<script type=\"application/ld+json\">\n" . $page_seo['schema_json'] . "\n</script>\n";
}
// --- Your CSS/JS Include ---
include 'head.php';
?>
</head>
<body>
<?php include 'header.php'?>
<?php include 'hero.php'?>
<?php
function getNews($mysqli) {
$q = "SELECT * FROM news ORDER BY news_date DESC LIMIT 6"; // Adjust LIMIT as needed
if ($res = $mysqli->query($q)) {
return $res->fetch_all(MYSQLI_ASSOC);
}
return [];
}
$newsItems = getNews($mysqli);
?>
<section class="motion-features py-5">
<div class="container">
<h2 class="display-5 fw-bold text-center mb-4" data-aos="fade-up">News</h2>
<div class="owl-carousel owl-theme">
<?php if (!empty($newsItems)): ?>
<?php foreach ($newsItems as $index => $news): ?>
<div class="item d-flex flex-column" data-aos="fade-up" data-aos-delay="<?= $index * 100 ?>">
<div class="motion-img mx-auto mt-auto">
<img src="uploads/<?= htmlspecialchars($news['image']) ?>" class="img-fluid" alt="<?= strip_tags($news['heading_normal'] . ' ' . $news['heading_bold']) ?>">
</div>
<div class="text-center motion-text-container flex-grow-1 d-flex flex-column align-items-center p-3">
<h4 class="motion-title a1">
<?= htmlspecialchars($news['heading_normal']) ?>
<strong><?= $news['heading_bold'] ?></strong>
</h4>
<p class="motion-text a1"><?= nl2br($news['intro']) ?></p>
</div>
<a href="news-detail-page.php?id=<?= $news['id'] ?>" class="btn btn-transparent stretched-link h-0 w-0 p-0 m-0"> </a>
<div class="d-flex justify-content-between text-muted small mb-2 p-2">
<span class="text-white">📅 <?= date('d F Y', strtotime($news['news_date'])) ?></span>
</div>
</div>
<?php endforeach; ?>
<?php else: ?>
<div class="text-white text-center">No news available at the moment.</div>
<?php endif; ?>
</div>
</div>
</section>
<section class="py-2">
<div class="container-fluid">
<h2 class="display-5 fw-bold text-center mb-4" data-aos="fade-up">Join Our Live Session</h2>
<div class="row g-2 gx-md-2 d-flex align-items-stretch">
<!-- Left Image -->
<div class="col-md-2 col-6 order-2 order-md-1 my-auto" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
<?php if (!empty($bottomLeftAd) && $bottomLeftAd['is_enabled']): ?>
<a href="<?= htmlspecialchars($bottomLeftAd['url']) ?>" target="_blank" rel="noopener noreferrer">
<img src="img/ads/<?= htmlspecialchars($bottomLeftAd['image']) ?>" class="img-fluid w-100 brr20 my-4" alt="<?= htmlspecialchars($bottomLeftAd['ad_key']) ?>">
</a>
<?php endif; ?>
</div>
<!-- Center Twitch Embed -->
<div class="col-md-8 order-1 order-md-2">
<div class="collab-section h-100">
<div class="collab-box bg-transparent h-100" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
<div class="mixcloud-embed-wrapper h-100 mt-0">
<iframe
src="https://player.twitch.tv/?channel=jamonculture&parent=floralwhite-woodpecker-723030.hostingersite.com"
height="100%"
width="100%"
frameborder="0"
allowfullscreen="true"
scrolling="no"
></iframe>
</div>
</div>
</div>
</div>
<!-- Right Image -->
<div class="col-md-2 col-6 order-3 order-md-3 my-auto" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
<?php if (!empty($bottomRightAd) && $bottomRightAd['is_enabled']): ?>
<a href="<?= htmlspecialchars($bottomRightAd['url']) ?>" target="_blank" rel="noopener noreferrer">
<img src="img/ads/<?= htmlspecialchars($bottomRightAd['image']) ?>" class="img-fluid w-100 brr20 my-4" alt="<?= htmlspecialchars($bottomRightAd['ad_key']) ?>">
</a>
<?php endif; ?>
</div>
</div>
</div>
</section>
<section class="marquee-section" data-aos="fade-up" data-aos-delay="500" data-aos-duration="1000">
<div class="container-fluid">
<div class="marquee-whole-wrap">
<div class="marquee-wrap">
<h1 class="marquee-text">JAM ON RADIO – YOUR HOME FOR URBAN CULTURE</h1>
</div>
<!--
<div class="marquee-wrap"><h2 class="marquee-text">Crafting Extraordinary Visuals</h2></div>
<div class="marquee-wrap"><h2 class="marquee-text">Crafting Extraordinary Visuals</h2></div>
-->
</div>
</div>
</section>
<section class="trending-section py-5">
<div class="bg-st">
<div class="container text-center">
<div class="heading-area py-5" data-aos="fade-up">
<h2 class="display-5 fw-bold text-center mb-4">Programmes</h2>
</div>
<div class="owl-carousel owl-theme" id="programmes-carousel" data-aos="fade-up" data-aos-delay="200">
<!-- Dynamic items will be injected here -->
</div>
</div>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", function () {
const carousel = document.getElementById("programmes-carousel");
const defaultImage = "https://via.placeholder.com/600x300?text=No+Image";
fetch("https://api.mixcloud.com/JamOnRadio/cloudcasts/")
.then(res => res.json())
.then(data => {
const categoryMap = new Map();
data.data.forEach(item => {
const category = (item.tags && item.tags.length > 0) ? item.tags[0].name : "Uncategorized";
if (!categoryMap.has(category)) {
categoryMap.set(category, item);
}
});
categoryMap.forEach((item, category) => {
const image = item.pictures?.extra_large || defaultImage;
const name = item.name || category;
const itemHTML = `
<div class="item">
<a href="programmes.php?category=${encodeURIComponent(category)}">
<div class="doc-card">
<img src="${image}" class="img-fluid brr20" alt="${category}">
<div class="overlay brr20">
<h4 title="${category}">${category}</h4>
</div>
</div>
</a>
</div>
`;
carousel.insertAdjacentHTML("beforeend", itemHTML);
});
// Re-initialize or trigger OwlCarousel refresh if already initialized
if (typeof $ !== 'undefined' && typeof $.fn.owlCarousel === 'function') {
$(carousel).trigger('destroy.owl.carousel'); // Remove old instance
$(carousel).owlCarousel({
items: 3,
margin: 20,
loop: true,
autoplay: true,
nav: true,
dots: true,
responsive: {
0: { items: 1 },
768: { items: 2 },
968: { items: 3 },
1024: { items: 4 }
}
});
}
})
.catch(error => {
console.error("Failed to load programmes:", error);
});
});
</script>
<style>.doc-card {
position: relative;
overflow: hidden;
}
.doc-card img {
width: 100%;
height: auto;
display: block;
}
.doc-card .overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%; /* 25% of the image height */
background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
color: white;
padding: 10px 12px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.overlay-title,
.overlay-subtitle {
margin: 0;
padding: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.overlay-title {
font-size: 1rem; /* equivalent to <h4> size */
font-weight: 600;
}
.overlay-subtitle {
font-size: 0.85rem;
opacity: 0.85;
}
</style>
<?php
function getBlogs($mysqli) {
$q = "SELECT * FROM blogs ORDER BY created_at DESC LIMIT 3";
if ($res = $mysqli->query($q)) {
return $res->fetch_all(MYSQLI_ASSOC);
}
return [];
}
$blogs = getBlogs($mysqli);
?>
<section class="blog-section py-5">
<div class="container">
<div class="row align-items-center mb-4">
<div class="col-lg-8 col-5" data-aos="fade-right">
<!--h4 class="font-02 mb-1">Read. Discover. Learn.</h4-->
<h2 class="display-5 fw-bold mb-4">Blog</h2>
</div>
<div class="col-lg-4 col-7 text-lg-end text-start" data-aos="fade-left">
<a href="blog.php" class="btn btn-outline-light btn-sm rounded-pill px-4 mb-4 browse-btn">View All Blogs</a>
</div>
</div>
<div class="row g-4">
<?php if (!empty($blogs)): ?>
<?php foreach ($blogs as $blog): ?>
<div class="col-md-4" data-aos="fade-up">
<div class="blog-post position-relative">
<div class="blog-image">
<img src="images/<?= htmlspecialchars($blog['image']) ?>" alt="Blog Image" class="img-fluid">
<span class="blog-date"><?= date('F j, Y', strtotime($blog['date'])) ?></span>
</div>
<div class="blog-content p-3">
<h5 class="text-white">
<?= htmlspecialchars($blog['heading_normal']) ?>
<strong><?= htmlspecialchars($blog['heading_bold']) ?></strong>
</h5>
<p class="text-light"><?= htmlspecialchars($blog['intro']) ?></p>
</div>
<a href="blog-detail-page.php?id=<?= $blog['id'] ?>" class="stretched-link"></a>
</div>
</div>
<?php endforeach; ?>
<?php else: ?>
<div class="col-12">
<p class="text-light">No blogs available at the moment.</p>
</div>
<?php endif; ?>
</div>
</div>
</section>
<section class="blog-section py-5">
<div class="container">
<!-- Title and Sort Row -->
<div class="row align-items-center mb-4">
<div class="col-lg-8" data-aos="fade-right">
<h2 class="display-5 fw-bold mb-4">Latest Tracks</h2>
</div>
<div class="col-lg-4 text-lg-end text-start mt-3 mt-lg-0 opacity-0" data-aos="fade-left">
<select class="form-select w-auto d-inline-block" aria-label="Sort by">
<option selected>Sort by</option>
<option value="date">Date (Newest)</option>
<option value="name">A-Z</option>
<option value="popularity">Popularity</option>
</select>
</div>
</div>
<?php include 'shows-api.php'?>
</div>
</section>
<?php include 'footer.php'?>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists