78 lines
5.2 KiB
PHP
78 lines
5.2 KiB
PHP
<?php
|
|
require_once __DIR__ . '/../db.php';
|
|
$isLoggedIn = isset($_SESSION['username']);
|
|
$userCredits = 0;
|
|
if ($isLoggedIn && isset($_SESSION['user_id'])) {
|
|
$stmt = getDbConnection()->prepare('SELECT credits FROM users WHERE id = :id');
|
|
$stmt->execute(['id' => $_SESSION['user_id']]);
|
|
$userCredits = (int) $stmt->fetchColumn();
|
|
}
|
|
?>
|
|
<?php $headerBgClass = $headerBgClass ?? 'bg-amber-50'; ?>
|
|
<?php $currentPage = basename($_SERVER['SCRIPT_NAME'] ?? ''); ?>
|
|
<header class="relative z-20 w-full <?php echo $headerBgClass; ?>">
|
|
<div class="px-6 py-3 flex items-center justify-between gap-6">
|
|
<div class="flex items-center gap-8">
|
|
<a href="/" class="inline-flex items-center shrink-0">
|
|
<img src="assets/logo.png" alt="OurApp" class="h-8 w-auto">
|
|
</a>
|
|
<?php if ($isLoggedIn): ?>
|
|
<nav class="hidden md:flex items-center gap-6 text-sm font-medium">
|
|
<a href="/" class="pb-1 border-b-2 <?php echo $currentPage === 'index.php' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-600 hover:text-gray-900'; ?>">My Critters</a>
|
|
<a href="create-critter.php" class="pb-1 border-b-2 <?php echo $currentPage === 'create-critter.php' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-600 hover:text-gray-900'; ?>">Create Critter</a>
|
|
</nav>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php if ($isLoggedIn): ?>
|
|
<div class="flex items-center gap-4">
|
|
<span class="hidden sm:inline-flex items-center gap-1.5 rounded-full bg-amber-100/70 ring-1 ring-amber-200 text-amber-900 text-sm font-semibold px-3 py-1.5">
|
|
<i data-lucide="coins" class="h-4 w-4 text-amber-500"></i>
|
|
Credits: <?php echo $userCredits; ?>
|
|
</span>
|
|
<a href="#" onClick="openCheckout(itemsList)" class="hidden sm:inline-flex items-center gap-2 rounded-xl bg-gray-900 text-white text-sm font-semibold px-4 py-2 transition-colors hover:bg-gray-800">
|
|
<i data-lucide="shopping-cart" class="h-4 w-4"></i> Buy 50 Credits
|
|
</a>
|
|
<span class="hidden sm:block h-6 w-px bg-gray-300/70"></span>
|
|
<div class="relative">
|
|
<button type="button" data-user-menu-toggle class="flex items-center gap-2">
|
|
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-purple-600 to-pink-500 text-white text-sm font-semibold">
|
|
<?php echo htmlspecialchars(strtoupper(substr($_SESSION['username'], 0, 1)), ENT_QUOTES, 'UTF-8'); ?>
|
|
</span>
|
|
<span class="hidden sm:inline text-sm font-medium text-gray-800"><?php echo htmlspecialchars($_SESSION['username'], ENT_QUOTES, 'UTF-8'); ?></span>
|
|
<i data-lucide="chevron-down" class="h-4 w-4 text-gray-500"></i>
|
|
</button>
|
|
<div id="userMenu" class="hidden absolute right-0 mt-2 w-52 rounded-xl bg-white shadow-lg ring-1 ring-gray-100 py-2 text-sm z-30">
|
|
<a href="create-critter.php" class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-50 sm:hidden">
|
|
<i data-lucide="sparkles" class="h-4 w-4"></i> Create Critter
|
|
</a>
|
|
<a href="#" onClick="openCheckout(itemsList)" class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-50 sm:hidden">
|
|
<i data-lucide="coins" class="h-4 w-4"></i> Buy 50 Credits
|
|
</a>
|
|
<a href="logout.php" class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-50">
|
|
<i data-lucide="log-out" class="h-4 w-4"></i> Log out
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('click', function (event) {
|
|
const menu = document.getElementById('userMenu');
|
|
if (!menu) return;
|
|
if (event.target.closest('[data-user-menu-toggle]')) {
|
|
menu.classList.toggle('hidden');
|
|
return;
|
|
}
|
|
if (!menu.contains(event.target)) {
|
|
menu.classList.add('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
<?php else: ?>
|
|
<div class="flex items-center gap-4">
|
|
<a href="login.php" class="font-medium text-gray-700 hover:text-gray-900">Login</a>
|
|
<a href="register.php" class="inline-flex items-center rounded-full bg-gradient-to-r from-purple-600 to-pink-500 px-5 py-2 font-semibold text-white shadow-sm hover:from-purple-700 hover:to-pink-600">Sign up</a>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</header>
|