<?php
function formatUrl($url) {
// Check if URL starts with http:// or https://
if (stripos($url, 'http://') === 0 || stripos($url, 'https://') === 0) {
// URL is already absolute, use as is
return $url;
} else {
// URL is relative, prepend "../"
return "../" . $url;
}
}
// Include database configuration
require_once __DIR__ . "/../admin/database/db_config.php";
// Make sure we have a database connection
if (!isset($conn) || !($conn instanceof mysqli)) {
// Attempt to reconnect or initialize connection
require_once __DIR__ . "/../admin/database/db_config.php";
}
// Make sure safe_query function is available
if (!function_exists('safe_query')) {
function safe_query($connection, $query) {
if ($connection instanceof mysqli && !$connection->connect_error) {
return $connection->query($query);
}
return false;
}
}
// Get site settings from database
$site_settings_query = "SELECT * FROM site_settings";
$site_settings_result = safe_query($conn, $site_settings_query);
$site_settings = [];
if ($site_settings_result && $site_settings_result->num_rows > 0) {
while ($row = $site_settings_result->fetch_assoc()) {
$site_settings[$row['setting_key']] = $row['setting_value'];
}
}
// Set default values if settings not found
$site_name = isset($site_settings['site_name']) ? $site_settings['site_name'] : 'Popular Computer Institute';
$site_tagline = isset($site_settings['site_tagline']) ? $site_settings['site_tagline'] : 'Computer Education Institute';
$site_logo = isset($site_settings['site_logo']) ? $site_settings['site_logo'] : 'assets/img/logo.png';
$primary_color = isset($site_settings['primary_color']) ? $site_settings['primary_color'] : '#4e73df';
$secondary_color = isset($site_settings['secondary_color']) ? $site_settings['secondary_color'] : '#2e59d9';
$navbar_style = isset($site_settings['navbar_style']) ? $site_settings['navbar_style'] : 'light';
$navbar_position = isset($site_settings['navbar_position']) ? $site_settings['navbar_position'] : 'fixed-top';
$enable_animations = isset($site_settings['enable_animations']) ? $site_settings['enable_animations'] : 'true';
$show_sitename_desktop = isset($site_settings['show_sitename_desktop']) ? $site_settings['show_sitename_desktop'] : 'true';
$show_sitename_mobile = isset($site_settings['show_sitename_mobile']) ? $site_settings['show_sitename_mobile'] : 'false';
$show_logo_desktop = isset($site_settings['show_logo_desktop']) ? $site_settings['show_logo_desktop'] : 'true';
$show_logo_mobile = isset($site_settings['show_logo_mobile']) ? $site_settings['show_logo_mobile'] : 'true';
// Check if user is logged in
$is_logged_in = isset($_SESSION['student_id']) || isset($_SESSION['user_id']) || isset($_SESSION['admin_id']) ? true : false;
// Get user data from database if logged in
$user_name = '';
$user_email = '';
$user_avatar = '';
$user_role = '';
if ($is_logged_in) {
// Determine user type and ID
$user_id = '';
$user_table = '';
if (isset($_SESSION['admin_id'])) {
$user_id = $_SESSION['admin_id'];
$user_table = 'users';
$user_role = 'admin';
} elseif (isset($_SESSION['student_id'])) {
$user_id = $_SESSION['student_id'];
$user_table = 'users';
$user_role = 'student';
} elseif (isset($_SESSION['user_id'])) {
$user_id = $_SESSION['user_id'];
$user_table = 'users';
$user_role = $_SESSION['role'] ?? 'user';
}
// Fetch user data from database
if (!empty($user_id) && !empty($user_table)) {
if ($user_table == 'users') {
// First check if the profile_image column exists
$column_check = $conn->query("SHOW COLUMNS FROM users LIKE 'profile_image'");
$has_profile_image = ($column_check && $column_check->num_rows > 0);
// For regular users, use prepared statement with proper column names
if ($has_profile_image) {
$stmt = $conn->prepare("SELECT username, email, profile_image, role FROM users WHERE id = ?");
} else {
$stmt = $conn->prepare("SELECT username, email, role FROM users WHERE id = ?");
}
$stmt->bind_param("i", $user_id);
$stmt->execute();
$result = $stmt->get_result();
if ($result && $result->num_rows > 0) {
$user_data = $result->fetch_assoc();
$user_name = $user_data['username'] ?? '';
$user_email = $user_data['email'] ?? '';
$user_avatar = $has_profile_image ? !empty($user_data['profile_image']) ? $user_data['profile_image'] : '' : '';
$user_role = $user_data['role'] ?? 'user';
}
$stmt->close();
} else {
// For other user types (legacy code)
$stmt = $conn->prepare("SELECT * FROM `$user_table` WHERE `id` = ? AND `role` = ?");
$stmt->bind_param("is", $user_id, $user_role); // 'i' = integer, 's' = string
$stmt->execute();
$result = $stmt->get_result();
if ($result && $result->num_rows > 0) {
$user_data = $result->fetch_assoc();
// Set user name based on user type
if ($user_role === 'admin') {
$user_name = isset($user_data['name']) ? $user_data['name'] : (isset($user_data['admin_name']) ? $user_data['admin_name'] : '');
} elseif ($user_role === 'student') {
$user_name = isset($user_data['name']) ? $user_data['name'] : (isset($user_data['student_name']) ? $user_data['student_name'] : '');
} else {
$user_name = isset($user_data['name']) ? $user_data['name'] : (isset($user_data['username']) ? $user_data['username'] : '');
}
// Get email from database
$user_email = isset($user_data['email']) ? $user_data['email'] : '';
// Get avatar if available
$user_avatar = isset($user_data['profile_image']) ? $user_data['profile_image'] : '';
}
}
}
// Fallback to session data if database fetch fails
if (empty($user_name)) {
$student_name = isset($_SESSION['student_name']) ? $_SESSION['student_name'] : '';
$admin_name = isset($_SESSION['admin_name']) ? $_SESSION['admin_name'] : '';
$user_name = !empty($admin_name) ? $admin_name : (!empty($student_name) ? $student_name : (isset($_SESSION['username']) ? $_SESSION['username'] : 'User'));
}
if (empty($user_email)) {
$user_email = isset($_SESSION['admin_email']) ? $_SESSION['admin_email'] : (isset($_SESSION['student_email']) ? $_SESSION['student_email'] : (isset($_SESSION['email']) ? $_SESSION['email'] : ''));
}
if (empty($user_avatar)) {
$user_avatar = isset($_SESSION['profile_image']) && !empty($_SESSION['profile_image']) ? $_SESSION['profile_image'] : '';
}
} else {
// Default values for logged out users
$user_name = 'Guest';
$user_email = '';
$user_avatar = '';
$user_role = '';
}
// Get user initials for avatar
$user_initials = '';
if (!empty($user_name) && $user_name !== 'User' && $user_name !== 'Guest') {
$name_parts = explode(' ', $user_name);
if (count($name_parts) >= 2) {
$user_initials = mb_substr($name_parts[0], 0, 1) . mb_substr($name_parts[count($name_parts)-1], 0, 1);
} else {
$user_initials = mb_substr($user_name, 0, 2);
}
$user_initials = strtoupper($user_initials);
} else {
$user_initials = 'UN';
}
// Get current page
$current_page = basename($_SERVER['PHP_SELF'], '.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $site_name; ?></title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Google Fonts - Poppins -->
<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=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/homepage.css">
<!-- Rounded Navbar CSS -->
<link rel="stylesheet" href="assets/css/rounded-navbar.css">
<?php
// Include theme loader
$theme_loader_path = __DIR__ . '/theme_loader.php';
if (file_exists($theme_loader_path)) {
include_once $theme_loader_path;
} else {
// Default theme settings if loader can't be found
$primary_color = '#4e73df';
$secondary_color = '#2c3e50';
$show_logo_desktop = 'true';
$show_logo_mobile = 'true';
$show_sitename_desktop = 'true';
$show_sitename_mobile = 'false';
}
?>
<style>
:root {
--primary-color: <?php echo $primary_color; ?>;
--secondary-color: <?php echo $secondary_color; ?>;
--primary-rgb: <?php
$hex = ltrim($primary_color, '#');
$r = hexdec(substr($hex, 0, 2));
$g = hexdec(substr($hex, 2, 2));
$b = hexdec(substr($hex, 4, 2));
echo "$r, $g, $b";
?>;
--secondary-rgb: <?php
$hex = ltrim($secondary_color, '#');
$r = hexdec(substr($hex, 0, 2));
$g = hexdec(substr($hex, 2, 2));
$b = hexdec(substr($hex, 4, 2));
echo "$r, $g, $b";
?>;
}
body {
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
/* Responsive brand text display */
@media (max-width: 767.98px) {
.navbar-brand .brand-text {
display: <?php echo ($show_sitename_mobile == 'true') ? 'inline-block' : 'none'; ?> !important;
}
.navbar-brand .navbar-logo {
display: <?php echo ($show_logo_mobile == 'true') ? 'block' : 'none'; ?> !important;
}
}
@media (min-width: 768px) {
.navbar-brand .brand-text {
display: <?php echo ($show_sitename_desktop == 'true') ? 'inline-block' : 'none'; ?> !important;
}
.navbar-brand .navbar-logo {
display: <?php echo ($show_logo_desktop == 'true') ? 'block' : 'none'; ?> !important;
}
}
/* Modern Navbar Styles with glassmorphism */
.navbar {
padding: 0.6rem 1rem;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 1030;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0 0 30px 30px;
margin: 0 15px;
width: calc(100% - 30px);
}
.navbar-light {
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}
.navbar-dark {
background-color: rgba(33, 37, 41, 0.85);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}
.navbar.scrolled {
padding: 0.4rem 1rem;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
margin: 0 5px;
width: calc(100% - 10px);
}
.navbar-light.scrolled {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.navbar-dark.scrolled {
background-color: rgba(25, 28, 31, 0.95);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
/* Logo Animation */
.navbar-brand {
display: flex;
align-items: center;
font-weight: 700;
color: var(--primary-color);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.navbar-logo {
height: 40px;
margin-right: 10px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.brand-text {
position: relative;
display: inline-block;
}
.brand-text::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: -2px;
left: 0;
background-color: var(--primary-color);
transform-origin: bottom right;
transition: transform 0.3s ease-out;
}
.navbar-brand:hover .brand-text::after {
transform: scaleX(1);
transform-origin: bottom left;
}
.navbar-brand:hover .navbar-logo {
transform: rotate(5deg) scale(1.05);
}
/* Hamburger Menu Animation */
.navbar-toggler {
border: none;
padding: 0;
width: 30px;
height: 24px;
position: relative;
transition: all 0.3s ease;
background: transparent;
}
.navbar-toggler:focus {
box-shadow: none;
outline: none;
}
.toggler-icon {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: var(--primary-color);
border-radius: 3px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.top-bar {
margin-top: 0;
transform-origin: left center;
}
.middle-bar {
margin-top: 10px;
transform-origin: left center;
}
.bottom-bar {
margin-top: 20px;
transform-origin: left center;
}
.navbar-toggler.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggler.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggler.collapsed .bottom-bar {
transform: rotate(0);
}
.navbar-toggler:not(.collapsed) .top-bar {
transform: rotate(45deg);
margin-top: 8px;
}
.navbar-toggler:not(.collapsed) .middle-bar {
opacity: 0;
}
.navbar-toggler:not(.collapsed) .bottom-bar {
transform: rotate(-45deg);
margin-top: 8px;
}
/* Navigation Links */
.nav-item {
position: relative;
/* margin: 0 0.15rem;
padding: 0 0.5rem; */
}
.nav-link {
font-weight: 500;
padding: 0.7rem 0.8rem !important;
position: relative;
transition: all 0.3s ease;
color: #555;
}
.navbar-dark .nav-link {
color: rgba(255, 255, 255, 0.85);
}
.nav-text {
position: relative;
display: inline-block;
padding: 0.2rem 0;
}
.nav-link::before {
content: '';
position: absolute;
width: 0;
height: 0;
bottom: 0;
left: 50%;
/* background-color: var(--primary-color); */
transform: translateX(-50%);
transition: all 0.3s ease;
z-index: -1;
opacity: 0.1;
border-radius: 5px;
}
.nav-link:hover::before, .nav-link.active::before {
width: 80%;
height: 80%;
}
.nav-link:hover, .nav-link.active {
color: #fff;
transform: translateY(-2px);
}
.navbar-dark .nav-link:hover, .navbar-dark .nav-link.active {
color: #fff;
}
.nav-text::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--primary-color);
transition: all 0.3s ease;
}
.nav-link:hover .nav-text::after, .nav-link.active .nav-text::after {
width: 100%;
}
/* Mega Dropdown Styling */
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
width: 100%;
border: none;
border-radius: 0 0 15px 15px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
padding: 20px 0;
margin-top: 0;
left: 0;
right: 0;
transform: translateY(20px);
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
display: block;
pointer-events: none;
}
.navbar-dark .mega-dropdown-menu {
background-color: rgba(33, 37, 41, 0.95);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}
.mega-dropdown:hover .mega-dropdown-menu {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.dropdown-toggle::after {
display: inline-block;
font-size: 10px;
margin-left: 5px;
transition: all 0.3s ease;
vertical-align: middle;
}
.mega-dropdown:hover .dropdown-toggle::after {
transform: rotate(180deg);
}
.menu-section {
padding: 15px;
border-radius: 10px;
transition: all 0.3s ease;
background-color: rgba(255, 255, 255, 0.05);
}
.menu-section:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.menu-section-title {
font-weight: 600;
font-size: 1rem;
margin-bottom: 15px;
color: var(--primary-color);
position: relative;
display: inline-block;
padding-bottom: 5px;
}
.navbar-dark .menu-section-title {
color: #fff;
}
.menu-section-title::after {
content: '';
position: absolute;
width: 50%;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--primary-color);
}
.menu-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.dropdown-item {
padding: 10px 15px;
font-weight: 500;
border-radius: 5px;
display: flex;
align-items: center;
transition: all 0.2s ease;
color: #555;
background-color: transparent;
}
.navbar-dark .dropdown-item {
color: rgba(255, 255, 255, 0.8);
}
.dropdown-item:hover, .dropdown-item:focus {
background-color: rgba(var(--primary-rgb), 0.1);
color: var(--primary-color);
transform: translateX(5px);
}
.navbar-dark .dropdown-item:hover, .navbar-dark .dropdown-item:focus {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
}
.dropdown-item i {
margin-right: 10px;
font-size: 0.9rem;
color: var(--primary-color);
transition: all 0.3s ease;
}
.navbar-dark .dropdown-item i {
color: rgba(255, 255, 255, 0.6);
}
.dropdown-item:hover i {
transform: scale(1.2);
}
/* Auth Buttons */
.auth-buttons {
display: flex;
gap: 10px;
}
.btn-login, .btn-register {
border-radius: 50px;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
z-index: 1;
padding: 0.55rem 1.5rem;
}
.btn-register {
background: var(--primary-color);
color: white;
border: none;
}
.btn-login {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-register::before, .btn-login::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.btn-register:hover, .btn-login:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.15);
}
.btn-register:hover::before, .btn-login:hover::before {
width: 100%;
}
/* User Avatar Menu */
.avatar-menu {
position: relative;
z-index: 1050;
}
.avatar-toggle {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: none;
border: none;
padding: 0;
position: relative;
z-index: 2;
width: 42px;
height: 42px;
}
.avatar-img {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--primary-color);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.status-indicator {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
bottom: 0;
right: 0;
border: 2px solid white;
}
.status-indicator.online {
background-color: #4CAF50;
}
.avatar-toggle:hover .avatar-img {
transform: scale(1.08);
box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
}
.avatar-dropdown {
position: absolute;
right: 0;
top: 120%;
width: 280px;
background: white;
border-radius: 15px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
/* padding: 20px 0 10px; */
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.98);
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 1040;
overflow: hidden;
pointer-events: none; /* Prevent interaction when hidden */
}
.avatar-menu.active .avatar-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto; /* Allow interaction when visible */
}
.avatar-header {
display: flex;
align-items: center;
/* padding: 0 20px 15px; */
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
margin-bottom: 10px;
}
.avatar-header-img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
border: 3px solid var(--primary-color);
}
.avatar-name {
font-weight: 600;
font-size: 1.1rem;
margin: 0;
color: #333;
}
.avatar-email {
font-size: 0.85rem;
color: #777;
margin: 5px 0 0;
}
.avatar-menu-item {
display: flex;
align-items: center;
padding: 12px 20px;
color: #555;
font-weight: 500;
transition: all 0.2s ease;
text-decoration: none;
}
.avatar-menu-item:hover {
background-color: rgba(var(--primary-rgb), 0.05);
color: var(--primary-color);
padding-left: 25px;
}
.avatar-menu-item i {
margin-right: 12px;
font-size: 1.1rem;
width: 20px;
text-align: center;
color: #777;
transition: all 0.3s ease;
}
.avatar-menu-item:hover i {
color: var(--primary-color);
transform: translateX(3px);
}
.avatar-divider {
height: 1px;
background-color: rgba(0, 0, 0, 0.05);
margin: 10px 0;
}
.avatar-menu-item.logout {
color: #e74a3b;
}
.avatar-menu-item.logout:hover {
background-color: rgba(231, 74, 59, 0.05);
color: #e74a3b;
}
.avatar-menu-item.logout:hover i {
color: #e74a3b;
}
/* Mobile Menu Animation */
@media (max-width: 991.98px) {
.navbar {
padding: 0.5rem 1rem;
}
.navbar-collapse {
background-color: rgba(255, 255, 255, 0.95);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 20px;
max-height: 80vh;
overflow-y: auto;
margin-top: 15px;
}
.navbar-dark .navbar-collapse {
background-color: rgba(33, 37, 41, 0.95);
}
.nav-item {
margin: 5px 0;
}
.nav-link {
padding: 0.8rem 1rem !important;
}
.nav-link::before {
display: none;
}
.navbar-nav {
margin-bottom: 15px;
}
.mega-dropdown-menu {
position: static;
width: 100%;
transform: none;
box-shadow: none;
visibility: visible;
opacity: 1;
padding: 0;
margin-top: 0;
display: none;
max-height: 0;
transition: max-height 0.3s ease-out;
pointer-events: auto;
}
.mega-dropdown-menu.show {
display: block;
max-height: 1000px;
}
.menu-items {
grid-template-columns: 1fr;
}
.menu-section {
padding: 10px;
margin-top: 10px;
}
.dropdown-item {
padding: 10px;
}
.dropdown-toggle::after {
float: right;
margin-top: 8px;
}
.dropdown-toggle[aria-expanded="true"]::after {
transform: rotate(180deg);
}
.auth-buttons {
flex-direction: column;
width: 100%;
gap: 10px;
}
.btn-login, .btn-register {
width: 100%;
text-align: center;
}
.avatar-menu {
margin: 15px auto 0;
}
.avatar-dropdown {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
border-radius: 15px 15px 0 0;
padding: 20px;
max-height: 90vh;
overflow-y: auto;
}
}
/* Navbar scroll animation */
.navbar-scrolled {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
padding: 0.6rem 1rem;
}
.navbar-dark.navbar-scrolled {
background-color: rgba(33, 37, 41, 0.95);
}
/* Navbar dropdown animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
/* Add animation classes */
.animate-fadeIn {
animation: fadeIn 0.4s ease forwards;
}
.animate-fadeInUp {
animation: fadeInUp 0.4s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<?php if($enable_animations === 'true'): ?>
<style>
.navbar-brand, .nav-link, .dropdown-item, .btn-login, .btn-register, .avatar-toggle, .avatar-menu-item {
animation: fadeIn 0.5s ease forwards;
}
.navbar-nav .nav-item:nth-child(1) { animation-delay: 0.1s; }
.navbar-nav .nav-item:nth-child(2) { animation-delay: 0.2s; }
.navbar-nav .nav-item:nth-child(3) { animation-delay: 0.3s; }
.navbar-nav .nav-item:nth-child(4) { animation-delay: 0.4s; }
.navbar-nav .nav-item:nth-child(5) { animation-delay: 0.5s; }
.navbar-nav .nav-item:nth-child(6) { animation-delay: 0.6s; }
.animate-fade-in {
animation: fadeIn 0.5s ease forwards;
}
.animate-slide-up {
animation: slideUp 0.5s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
<?php endif; ?>
<style>
/* Additional responsive visibility classes */
.desktop-only {
display: none !important;
}
.mobile-only {
display: none !important;
}
/* Must be more specific than other rules */
@media (min-width: 768px) {
.navbar-brand .desktop-only {
display: block !important;
}
.navbar-brand .desktop-only.inline {
display: inline-block !important;
}
.navbar-brand .mobile-only {
display: none !important;
}
}
/* Must be more specific than other rules */
@media (max-width: 767.98px) {
.navbar-brand .mobile-only {
display: block !important;
}
.navbar-brand .mobile-only.inline {
display: inline-block !important;
}
.navbar-brand .desktop-only {
display: none !important;
}
}
</style>
</head>
<body>
<!-- Main Navigation -->
<nav class="navbar curved-navbar navbar-expand-lg navbar-<?php echo $navbar_style; ?> <?php echo $navbar_position; ?>">
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="index.php">
<!-- Desktop Logo -->
<?php if ($show_logo_desktop == 'true'): ?>
<img src="<?php echo $site_logo; ?>" alt="<?php echo $site_name; ?> Logo" class="desktop-only inline navbar-logo">
<?php endif; ?>
<!-- Mobile Logo -->
<?php if ($show_logo_mobile == 'true'): ?>
<img src="<?php echo $site_logo; ?>" alt="<?php echo $site_name; ?> Logo" class="mobile-only inline navbar-logo">
<?php endif; ?>
<!-- Desktop Site Name -->
<?php if ($show_sitename_desktop == 'true'): ?>
<span class="desktop-only inline brand-text"><?php echo $site_name; ?></span>
<?php endif; ?>
<!-- Mobile Site Name -->
<?php if ($show_sitename_mobile == 'true'): ?>
<span class="mobile-only inline brand-text"><?php echo $site_name; ?></span>
<?php endif; ?>
</a>
<!-- Mobile Toggle with animated icon -->
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggler-icon top-bar"></span>
<span class="toggler-icon middle-bar"></span>
<span class="toggler-icon bottom-bar"></span>
</button>
<!-- Navbar Links -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<!-- Home -->
<li class="nav-item">
<a class="nav-link <?php echo ($current_page == 'index') ? 'active' : ''; ?>" href="index.php">
<span class="nav-text">Home</span>
</a>
</li>
<!-- Courses -->
<li class="nav-item">
<a class="nav-link <?php echo ($current_page == 'courses') ? 'active' : ''; ?>" href="courses.php">
<span class="nav-text">Courses</span>
</a>
</li>
<!-- Student Dropdown -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle" href="#" id="studentDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="nav-text">Student</span>
</a>
<div class="dropdown-menu mega-dropdown-menu" aria-labelledby="studentDropdown">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="menu-section">
<h6 class="menu-section-title">Student Zone</h6>
<div class="menu-items">
<a class="dropdown-item" href="attendance.php">
<i class="fas fa-clipboard-check"></i>
<span>Attendance</span>
</a>
<a class="dropdown-item" href="students.php">
<i class="fas fa-user-graduate"></i>
<span>Student Login</span>
</a>
<!-- <a class="dropdown-item" href="student-list.php">
<i class="fas fa-list"></i>
<span>Student List</span>
</a> -->
<a class="dropdown-item" href="student-activities.php">
<i class="fas fa-running"></i>
<span>Student Activities</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- Exams Dropdown -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle" href="#" id="examsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="nav-text">Exams</span>
</a>
<div class="dropdown-menu mega-dropdown-menu" aria-labelledby="examsDropdown">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="menu-section">
<h6 class="menu-section-title">Examination Center</h6>
<div class="menu-items">
<a class="dropdown-item" href="practice-exams.php">
<i class="fas fa-pencil-alt"></i>
<span>Practice Exams</span>
</a>
<a class="dropdown-item" href="exam-results.php">
<i class="fas fa-award"></i>
<span>Results</span>
</a>
<a class="dropdown-item" href="exam-schedule.php">
<i class="fas fa-calendar-alt"></i>
<span>Exam Schedule</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- About Us Dropdown -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle" href="#" id="aboutDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="nav-text">About Us</span>
</a>
<div class="dropdown-menu mega-dropdown-menu" aria-labelledby="aboutDropdown">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="menu-section">
<h6 class="menu-section-title">About Our Institute</h6>
<div class="menu-items">
<a class="dropdown-item" href="about.php">
<i class="fas fa-building"></i>
<span>Institute Details</span>
</a>
<a class="dropdown-item" href="instructors.php">
<i class="fas fa-images"></i>
<span>Our Faculty</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- Contact Us -->
<li class="nav-item">
<a class="nav-link <?php echo ($current_page == 'contact') ? 'active' : ''; ?>" href="contact.php">
<span class="nav-text">Contact Us</span>
</a>
</li>
</ul>
<div class="nav-actions">
<?php if ($is_logged_in): ?>
<!-- User Avatar Menu -->
<div class="avatar-menu ms-3">
<button class="avatar-toggle" type="button" id="avatarMenuButton" aria-expanded="false" aria-haspopup="true">
<span class="status-indicator online"></span>
<?php if (!empty($user_avatar)): ?>
<?php
// Ensure the path is properly formatted
$display_avatar = $user_avatar;
if (strpos($display_avatar, 'uploads/') === 0) {
$display_avatar = $display_avatar; // Already relative to root
} elseif (strpos($display_avatar, 'assets/') === 0) {
$display_avatar = $display_avatar; // Already relative to root
} elseif (strpos($display_avatar, '../') === 0) {
$display_avatar = substr($display_avatar, 3); // Remove the leading ../
} elseif (strpos($display_avatar, '/') === 0) {
$display_avatar = substr($display_avatar, 1); // Remove the leading /
}
// Verify file exists
if (!file_exists($display_avatar)) {
$display_avatar = 'assets/img/default-avatar.png';
}
?>
<img src="<?php echo formatUrl($user_avatar); ?>" alt="User Avatar" class="avatar-img">
<?php else: ?>
<div class="avatar-img initial"><?php echo $user_initials; ?></div>
<?php endif; ?>
</button>
<div class="avatar-dropdown" id="avatarDropdownMenu">
<div class="avatar-header">
<?php if (!empty($user_avatar)): ?>
<img src="<?php echo htmlspecialchars(formatUrl($user_avatar)); ?>" alt="User Avatar" class="avatar-header-img">
<?php else: ?>
<div class="avatar-header-img initial"><?php echo $user_initials; ?></div>
<?php endif; ?>
<div>
<p class="avatar-name"><?php echo htmlspecialchars($user_name); ?></p>
<?php if (!empty($user_email)): ?>
<p class="avatar-email"><?php echo htmlspecialchars($user_email); ?></p>
<?php endif; ?>
<?php if($user_role === 'admin'): ?>
<span class="badge bg-primary">Administrator</span>
<?php elseif($user_role === 'instructor'): ?>
<span class="badge bg-info">Instructor</span>
<?php elseif($user_role === 'student'): ?>
<span class="badge bg-success">Student</span>
<?php endif; ?>
</div>
</div>
<?php if($user_role === 'admin' || $user_role === 'developer' || $user_role === 'director'): ?>
<a href="admin/index.php" class="avatar-menu-item">
<i class="fas fa-tachometer-alt"></i> Admin Dashboard
</a>
<a href="admin/profile.php" class="avatar-menu-item">
<i class="fas fa-user-shield"></i> Admin Profile
</a>
<a href="admin/settings.php" class="avatar-menu-item">
<i class="fas fa-cogs"></i> Site Settings
</a>
<?php elseif($user_role === 'instructor'): ?>
<a href="faculty/index.php" class="avatar-menu-item">
<i class="fas fa-tachometer-alt"></i> My Dashboard
</a>
<a href="faculty/profile.php" class="avatar-menu-item">
<i class="fas fa-user"></i> My Profile
</a>
<?php else: ?>
<a href="student/index.php" class="avatar-menu-item">
<i class="fas fa-tachometer-alt"></i> My Dashboard
</a>
<a href="student/profile.php" class="avatar-menu-item">
<i class="fas fa-user"></i> My Profile
</a>
<?php endif; ?>
<div class="avatar-divider"></div>
<a href="<?php echo $user_role === 'admin' ? 'logout.php' : 'logout.php'; ?>" class="avatar-menu-item logout">
<i class="fas fa-sign-out-alt"></i> Logout
</a>
</div>
</div>
<?php else: ?>
<!-- Auth Buttons -->
<div class="auth-buttons">
<!-- <a href="register.php" class="btn btn-register rounded-pill">Register</a> -->
<a href="login.php" class="btn btn-login rounded-pill">Login</a>
</div>
<?php endif; ?>
</div>
</div>
</div>
</nav>
<!-- Main Content Starts Here -->
<script>
// Avatar dropdown toggle functionality and other navbar interactions
document.addEventListener('DOMContentLoaded', function() {
// Avatar dropdown toggle
const avatarToggle = document.getElementById('avatarMenuButton');
const avatarMenu = document.querySelector('.avatar-menu');
const avatarDropdown = document.getElementById('avatarDropdownMenu');
if (avatarToggle) {
// Fix: Remove any event listeners that might be attached
const newAvatarToggle = avatarToggle.cloneNode(true);
avatarToggle.parentNode.replaceChild(newAvatarToggle, avatarToggle);
// Add click event listener to the new button
newAvatarToggle.addEventListener('click', function(e) {
console.log('Avatar toggle clicked'); // Debug log
e.preventDefault();
e.stopPropagation();
// Toggle active class directly
if (avatarMenu.classList.contains('active')) {
avatarMenu.classList.remove('active');
newAvatarToggle.setAttribute('aria-expanded', 'false');
} else {
avatarMenu.classList.add('active');
newAvatarToggle.setAttribute('aria-expanded', 'true');
// Close other dropdowns when avatar dropdown is opened
const megaDropdowns = document.querySelectorAll('.mega-dropdown-menu');
megaDropdowns.forEach(dropdown => {
dropdown.classList.remove('animate-fadeInUp');
});
}
});
// Close when clicking outside
document.addEventListener('click', function(e) {
if (avatarMenu && !avatarMenu.contains(e.target) && e.target !== newAvatarToggle) {
avatarMenu.classList.remove('active');
newAvatarToggle.setAttribute('aria-expanded', 'false');
}
});
// Alternative: Use Bootstrap's dropdown API directly
if (typeof bootstrap !== 'undefined') {
try {
const dropdownElementList = [avatarToggle];
const dropdownList = dropdownElementList.map(function(dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl, {
autoClose: true
});
});
console.log('Bootstrap dropdown initialized as fallback');
} catch (e) {
console.warn('Bootstrap dropdown initialization failed:', e);
}
}
}
// Navbar scroll effect
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// Enhanced hover effects for nav links
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('mouseenter', function() {
if (window.innerWidth >= 992) {
this.style.transform = 'translateY(-3px)';
}
});
link.addEventListener('mouseleave', function() {
if (window.innerWidth >= 992) {
if (!this.classList.contains('active')) {
this.style.transform = '';
}
}
});
});
// Enhanced hover effects for buttons
const buttons = document.querySelectorAll('.btn-login, .btn-register');
buttons.forEach(button => {
button.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px) scale(1.02)';
});
button.addEventListener('mouseleave', function() {
this.style.transform = '';
});
});
// Handle mobile dropdowns
const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
function setupMobileDropdowns() {
if (window.innerWidth < 992) { // Mobile view
dropdownToggles.forEach(toggle => {
toggle.setAttribute('data-bs-toggle', 'collapse');
const dropdownId = toggle.getAttribute('id');
const dropdownMenu = document.querySelector(`[aria-labelledby="${dropdownId}"]`);
if (dropdownMenu) {
const targetId = `${dropdownId}Menu`;
dropdownMenu.setAttribute('id', targetId);
toggle.setAttribute('data-bs-target', `#${targetId}`);
toggle.setAttribute('aria-expanded', 'false');
// Remove hover behavior
dropdownMenu.classList.remove('show');
}
});
} else { // Desktop view
dropdownToggles.forEach(toggle => {
toggle.removeAttribute('data-bs-toggle');
toggle.removeAttribute('data-bs-target');
toggle.removeAttribute('aria-expanded');
});
}
}
// Initial setup
setupMobileDropdowns();
// Update on resize
window.addEventListener('resize', setupMobileDropdowns);
// Add hover effect for desktop dropdowns
const megaDropdowns = document.querySelectorAll('.mega-dropdown');
megaDropdowns.forEach(dropdown => {
dropdown.addEventListener('mouseenter', function() {
if (window.innerWidth >= 992) {
const dropdownMenu = this.querySelector('.mega-dropdown-menu');
if (dropdownMenu) {
dropdownMenu.classList.add('animate-fadeInUp');
// Close avatar dropdown when mega menu is opened
if (avatarMenu) {
avatarMenu.classList.remove('active');
}
}
}
});
dropdown.addEventListener('mouseleave', function() {
if (window.innerWidth >= 992) {
const dropdownMenu = this.querySelector('.mega-dropdown-menu');
if (dropdownMenu) {
dropdownMenu.classList.remove('animate-fadeInUp');
}
}
});
});
// Apply active class to current page in navbar
const currentLocation = window.location.href;
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
navLinks.forEach(link => {
if (link.href === currentLocation) {
link.classList.add('active');
// If in dropdown, make parent active too
const parentDropdown = link.closest('.dropdown');
if (parentDropdown) {
const dropdownToggle = parentDropdown.querySelector('.dropdown-toggle');
if (dropdownToggle) {
dropdownToggle.classList.add('active');
}
}
}
});
// Add shine effect on hover for buttons
document.querySelectorAll('.btn-register, .btn-login').forEach(button => {
button.addEventListener('mouseenter', function() {
this.classList.add('btn-shine');
});
button.addEventListener('mouseleave', function() {
this.classList.remove('btn-shine');
});
});
});
</script>
<style>
/* Additional hover effects */
.btn-shine {
position: relative;
overflow: hidden;
}
.btn-shine::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
60deg,
rgba(255, 255, 255, 0) 10%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.2) 30%,
rgba(255, 255, 255, 0) 70%
);
transform: rotate(30deg);
animation: shine 1.5s forwards;
}
@keyframes shine {
0% {
transform: scale(0) rotate(30deg);
}
100% {
transform: scale(3) rotate(30deg);
}
}
</style>
<style>
/* Mobile specific fixes */
@media (max-width: 767.98px) {
.avatar-toggle {
width: 42px;
height: 42px;
padding: 8px; /* Increase padding for better touch target */
}
/* Ensure dropdown appears in the right position on mobile */
.avatar-dropdown {
right: 0;
left: auto;
width: 260px;
max-width: 100vw;
}
/* Make sure avatar menu has high z-index on mobile */
.avatar-menu {
z-index: 1060;
}
}
</style>
<script>
// Direct fix for avatar menu
document.addEventListener('DOMContentLoaded', function() {
const avatarButton = document.getElementById('avatarMenuButton');
const avatarMenu = document.querySelector('.avatar-menu');
if (avatarButton && avatarMenu) {
// Force remove and reattach click handler
avatarButton.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
avatarMenu.classList.toggle('active');
console.log('Avatar clicked with direct handler');
return false;
};
}
// Handle visibility of logo and site name based on screen size
// No longer needed with the new class-based approach
/*
const brandLogo = document.querySelector('.navbar-logo');
const brandText = document.querySelector('.brand-text');
// Set initial visibility based on screen size
updateBrandVisibility();
// Update visibility on window resize
window.addEventListener('resize', updateBrandVisibility);
function updateBrandVisibility() {
const isMobile = window.innerWidth < 768;
if (brandLogo) {
if (isMobile) {
// Mobile view
brandLogo.style.display = <?php echo ($show_logo_mobile == 'true') ? "'inline-block'" : "'none'"; ?>;
} else {
// Desktop view
brandLogo.style.display = <?php echo ($show_logo_desktop == 'true') ? "'inline-block'" : "'none'"; ?>;
}
}
if (brandText) {
if (isMobile) {
// Mobile view
brandText.style.display = <?php echo ($show_sitename_mobile == 'true') ? "'inline-block'" : "'none'"; ?>;
} else {
// Desktop view
brandText.style.display = <?php echo ($show_sitename_desktop == 'true') ? "'inline-block'" : "'none'"; ?>;
}
}
}
*/
});
</script>
</body>
</html>
