churchtube/includes/header.php

136 lines
5.3 KiB
PHP

<?php
require_once __DIR__ . '/auth.php';
require_once __DIR__ . '/db.php';
require_once __DIR__ . '/settings_helper.php';
$site_title = get_setting('site_title', 'ChurchTube');
$primary_color = get_setting('primary_color', '#7c4dff');
$secondary_color = get_setting('secondary_color', '#ff4081');
$logo_url = get_setting('logo_url', '');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($site_title) ?></title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--primary-color: <?= $primary_color ?>;
--primary-rgb: <?= hexToRgb($primary_color) ?>;
--secondary-color: <?= $secondary_color ?>;
/* Dark Theme (Only) */
--bg-main: #0f0f0f;
--bg-card: #1a1a1a;
--glass: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--text-main: #ffffff;
--text-muted: #aaaaaa;
}
@media (max-width: 600px) {
header {
display: flex !important;
flex-wrap: wrap !important;
height: auto !important;
padding: 10px 16px !important;
gap: 10px !important;
position: relative !important;
justify-content: space-between !important;
}
.logo {
font-size: 1.1rem !important;
margin: 0 !important;
flex: 1;
max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-actions {
width: auto !important;
order: 2 !important;
gap: 8px !important;
}
.search-bar {
display: flex !important;
width: 100% !important;
height: 36px !important;
margin: 0 !important;
order: 3 !important;
padding: 0 12px !important;
}
.btn {
padding: 4px 10px !important;
font-size: 0.8rem !important;
}
.hide-mobile { display: none; }
}
</style>
</head>
<body class="theme-dark">
<?php
function hexToRgb($hex) {
$hex = str_replace("#", "", $hex);
if(strlen($hex) == 3) {
$r = hexdec(substr($hex,0,1).substr($hex,0,1));
$g = hexdec(substr($hex,1,1).substr($hex,1,1));
$b = hexdec(substr($hex,2,1).substr($hex,2,1));
} else {
$r = hexdec(substr($hex,0,2));
$g = hexdec(substr($hex,2,2));
$b = hexdec(substr($hex,4,2));
}
return "$r, $g, $b";
}
?>
<header>
<a href="index.php" class="logo">
<?php if ($logo_url): ?>
<img src="<?= htmlspecialchars($logo_url) ?>" alt="Logo" style="height: 40px;">
<?php else: ?>
<?= htmlspecialchars($site_title) ?>
<?php endif; ?>
</a>
<form class="search-bar" action="index.php" method="GET">
<input type="text" name="q" placeholder="Search sermons..." value="<?= htmlspecialchars($_GET['q'] ?? '') ?>">
<button type="submit" style="background:none; border:none; color:white; cursor:pointer; padding: 0 10px;">
<i class="fas fa-search"></i>
</button>
</form>
<div class="user-actions" style="display: flex; gap: 16px; align-items: center;">
<?php if (isLoggedIn()):
$hdr_avatar = '';
try {
$stmt = $pdo->prepare("SELECT avatar_url FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$hdr_avatar = $stmt->fetchColumn();
} catch (Exception $e) {
// Avatar column might not exist yet if migration wasn't run
}
?>
<a href="profile.php" style="width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--primary-color); display: flex; align-items: center; justify-content: center; border: 2px solid var(--glass-border);">
<?php if ($hdr_avatar): ?>
<img src="<?= htmlspecialchars($hdr_avatar) ?>" style="width: 100%; height: 100%; object-fit: cover;">
<?php else: ?>
<span style="color: white; font-size: 0.8rem;"><?= strtoupper(substr($_SESSION['username'], 0, 1)) ?></span>
<?php endif; ?>
</a>
<?php if (isEditor()): ?>
<a href="admin/index.php" class="btn" style="background: var(--glass);"><i class="fas fa-cog"></i> <span class="hide-mobile">Admin</span></a>
<?php endif; ?>
<a href="logout.php" class="btn btn-primary">Logout</a>
<?php else: ?>
<a href="login.php" class="btn" style="background: var(--glass);">Login</a>
<a href="register.php" class="btn btn-primary">Register</a>
<?php endif; ?>
</div>
</header>
<main>