|
Server IP : 2a02:4780:3:1493:0:3736:a38e:7 / Your IP : 216.73.216.60 Web Server : LiteSpeed System : Linux sg-nme-web1393.main-hosting.eu 4.18.0-553.84.1.lve.el8.x86_64 #1 SMP Tue Nov 25 18:33:03 UTC 2025 x86_64 User : u926327694 ( 926327694) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : OFF | Python : ON Directory (0755) : /home/u926327694/domains/smsoft.in/public_html/demo/src/../../alumini/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<?php
include('header.php');
// Database query for events
$q = isset($_GET['q']) ? trim($_GET['q']) : '';
$category = isset($_GET['category']) ? trim($_GET['category']) : '';
$from = isset($_GET['from']) ? trim($_GET['from']) : '';
$to = isset($_GET['to']) ? trim($_GET['to']) : '';
$where = " WHERE is_active = 1 ";
if ($q !== '') {
$q_esc = mysqli_real_escape_string($con, $q);
$where .= " AND event_name LIKE '%$q_esc%' ";
}
if ($category !== '') {
$category_esc = mysqli_real_escape_string($con, $category);
$where .= " AND event_category = '$category_esc' ";
}
if ($from !== '' && preg_match('/^\d{4}-\d{2}-\d{2}$/', $from)) {
$from_esc = mysqli_real_escape_string($con, $from);
$where .= " AND event_date >= '$from_esc' ";
}
if ($to !== '' && preg_match('/^\d{4}-\d{2}-\d{2}$/', $to)) {
$to_esc = mysqli_real_escape_string($con, $to);
$where .= " AND event_date <= '$to_esc' ";
}
$order_by = " ORDER BY event_date DESC, id DESC ";
$query = "SELECT * FROM events $where $order_by";
$sel_event = mysqli_query($con, $query);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Events | RCU Alumni Portal</title>
<meta name="description" content="Discover upcoming events at RCU Alumni Portal">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* ============================================
CSS VARIABLES & THEME
============================================ */
:root {
/* Primary Colors */
--primary: #6366f1;
--primary-dark: #4f46e5;
--primary-light: #818cf8;
--secondary: #64748b;
/* Gradients */
--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
--gradient-hero: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
--gradient-card: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
--gradient-accent: linear-gradient(135deg, #f472b6 0%, #c084fc 100%);
/* Glass Effect */
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
/* Border Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
/* Transitions */
--transition-fast: 0.15s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
/* Z-index */
--z-sticky: 100;
--z-fixed: 200;
--z-modal: 300;
--z-toast: 400;
}
/* Dark Mode Variables */
[data-theme="dark"] {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-card: #1e293b;
--bg-input: #334155;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--border-color: #334155;
--glass-bg: rgba(30, 41, 59, 0.8);
--glass-border: rgba(255, 255, 255, 0.1);
}
/* Light Mode Variables */
:root, [data-theme="light"] {
--bg-primary: #f8fafc;
--bg-secondary: #ffffff;
--bg-card: #ffffff;
--bg-input: #f1f5f9;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
--border-color: #e2e8f0;
}
/* ============================================
BASE STYLES
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family);
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
transition: background-color var(--transition-base), color var(--transition-base);
}
/* Scroll Progress Bar */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 4px;
background: var(--gradient-primary);
z-index: 1000;
transition: width 0.1s ease;
}
/* ============================================
NAVBAR STYLES
============================================ */
.navbar-custom {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--glass-border);
padding: var(--space-md) 0;
transition: all var(--transition-base);
}
.navbar-custom.scrolled {
background: var(--bg-secondary);
box-shadow: var(--shadow-lg);
}
.navbar-brand {
font-weight: 700;
font-size: var(--font-size-xl);
color: var(--text-primary) !important;
display: flex;
align-items: center;
gap: var(--space-sm);
}
.navbar-brand img {
height: 40px;
border-radius: var(--radius-sm);
}
.nav-search {
background: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
padding: var(--space-sm) var(--space-md);
width: 300px;
transition: all var(--transition-base);
}
.nav-search:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.nav-icon-btn {
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: var(--bg-input);
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all var(--transition-base);
cursor: pointer;
}
.nav-icon-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: translateY(-2px);
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: var(--font-size-sm);
}
/* ============================================
HERO SECTION
============================================ */
.hero-section {
background: var(--gradient-hero);
padding: var(--space-2xl) 0;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
animation: float 8s ease-in-out infinite;
}
.hero-section::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
animation: float 10s ease-in-out infinite reverse;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-30px) rotate(5deg); }
}
.hero-title {
font-size: var(--font-size-4xl);
font-weight: 800;
color: white;
margin-bottom: var(--space-md);
animation: fadeInUp 0.6s ease forwards;
}
.hero-subtitle {
font-size: var(--font-size-lg);
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--space-xl);
animation: fadeInUp 0.6s ease 0.1s forwards;
opacity: 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-box {
background: white;
border-radius: var(--radius-lg);
padding: var(--space-md);
box-shadow: var(--shadow-xl);
animation: fadeInUp 0.6s ease 0.2s forwards;
opacity: 0;
}
.search-input {
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
font-size: var(--font-size-base);
transition: all var(--transition-base);
}
.search-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
outline: none;
}
.search-btn {
background: var(--gradient-primary);
border: none;
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-xl);
font-weight: 600;
color: white;
transition: all var(--transition-base);
}
.search-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}
/* ============================================
FILTERS SECTION
============================================ */
.filters-section {
background: var(--bg-secondary);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-bottom: var(--space-xl);
box-shadow: var(--shadow-sm);
}
.filter-select {
background: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
color: var(--text-primary);
transition: all var(--transition-base);
}
.filter-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
outline: none;
}
.filter-btn {
background: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
color: var(--text-secondary);
display: flex;
align-items: center;
gap: var(--space-sm);
transition: all var(--transition-base);
cursor: pointer;
}
.filter-btn:hover, .filter-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
/* ============================================
EVENT CARDS
============================================ */
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: var(--space-xl);
}
.event-card {
background: var(--bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: all var(--transition-base);
border: 1px solid var(--border-color);
position: relative;
}
.event-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-card-hover);
}
.event-card-image {
position: relative;
height: 200px;
overflow: hidden;
}
.event-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.event-card:hover .event-card-image img {
transform: scale(1.08);
}
.event-date-badge {
position: absolute;
top: var(--space-md);
left: var(--space-md);
background: var(--gradient-primary);
color: white;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
text-align: center;
box-shadow: var(--shadow-md);
}
.event-date-badge .day {
font-size: var(--font-size-2xl);
font-weight: 800;
line-height: 1;
}
.event-date-badge .month {
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 1px;
}
.event-price-badge {
position: absolute;
top: var(--space-md);
right: var(--space-md);
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
color: white;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
font-weight: 600;
font-size: var(--font-size-sm);
}
.event-card-body {
padding: var(--space-lg);
}
.event-category {
display: inline-block;
background: rgba(99, 102, 241, 0.1);
color: var(--primary);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 600;
margin-bottom: var(--space-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.event-title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-sm);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.event-description {
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--space-md);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.event-meta {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.event-meta-item {
display: flex;
align-items: center;
gap: var(--space-sm);
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.event-meta-item i {
color: var(--primary);
width: 18px;
}
.event-card-footer {
padding: var(--space-md) var(--space-lg);
border-top: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.view-details-btn {
background: var(--gradient-primary);
color: white;
border: none;
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-lg);
font-weight: 600;
font-size: var(--font-size-sm);
transition: all var(--transition-base);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
.view-details-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
color: white;
}
.share-btn {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: var(--bg-input);
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all var(--transition-base);
cursor: pointer;
}
.share-btn:hover {
background: #25D366;
color: white;
border-color: #25D366;
transform: scale(1.1);
}
/* ============================================
SKELETON LOADER
============================================ */
.skeleton {
background: linear-gradient(90deg, var(--bg-input) 25%, var(--bg-secondary) 50%, var(--bg-input) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: var(--radius-sm);
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-card {
background: var(--bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
}
.skeleton-image {
height: 200px;
}
.skeleton-body {
padding: var(--space-lg);
}
.skeleton-title {
height: 24px;
width: 80%;
margin-bottom: var(--space-md);
}
.skeleton-text {
height: 16px;
width: 100%;
margin-bottom: var(--space-sm);
}
.skeleton-text-short {
height: 16px;
width: 60%;
}
/* ============================================
EMPTY STATE
============================================ */
.empty-state {
text-align: center;
padding: var(--space-2xl);
}
.empty-state-icon {
width: 120px;
height: 120px;
background: var(--gradient-accent);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-xl);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.empty-state-icon i {
font-size: 48px;
color: white;
}
.empty-state-title {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.empty-state-text {
color: var(--text-secondary);
font-size: var(--font-size-base);
}
/* ============================================
DARK MODE TOGGLE
============================================ */
.theme-toggle {
width: 52px;
height: 28px;
background: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
position: relative;
cursor: pointer;
transition: all var(--transition-base);
}
.theme-toggle::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: var(--gradient-primary);
border-radius: var(--radius-full);
transition: all var(--transition-base);
display: flex;
align-items: center;
justify-content: center;
}
.theme-toggle.active::before {
transform: translateX(24px);
}
/* ============================================
MOBILE BOTTOM NAV
============================================ */
.mobile-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
padding: var(--space-sm) 0;
z-index: var(--z-fixed);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}
.mobile-bottom-nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
color: var(--text-muted);
font-size: var(--font-size-xs);
text-decoration: none;
transition: color var(--transition-fast);
}
.mobile-bottom-nav-item.active {
color: var(--primary);
}
.mobile-bottom-nav-item i {
font-size: 20px;
}
/* ============================================
TOAST NOTIFICATION
============================================ */
.toast-notification {
position: fixed;
top: 20px;
right: 20px;
background: var(--bg-card);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
box-shadow: var(--shadow-xl);
display: flex;
align-items: center;
gap: var(--space-md);
z-index: var(--z-toast);
transform: translateX(120%);
transition: transform var(--transition-base);
}
.toast-notification.show {
transform: translateX(0);
}
.toast-notification.success {
border-left: 4px solid #10b981;
}
.toast-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: rgba(16, 185, 129, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #10b981;
}
/* ============================================
RESPONSIVE STYLES
============================================ */
@media (max-width: 991px) {
.nav-search {
width: 200px;
}
.hero-title {
font-size: var(--font-size-3xl);
}
.events-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}
@media (max-width: 768px) {
.navbar-custom .container {
position: relative;
}
.nav-search {
display: none;
}
.hero-title {
font-size: var(--font-size-2xl);
}
.hero-subtitle {
font-size: var(--font-size-base);
}
.search-box {
padding: var(--space-md);
}
.search-input {
padding: var(--space-sm) var(--space-md);
}
.events-grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.event-card-image {
height: 180px;
}
.mobile-bottom-nav {
display: flex;
justify-content: space-around;
}
body {
padding-bottom: 70px;
}
}
@media (max-width: 480px) {
.hero-section {
padding: var(--space-xl) 0;
}
.hero-title {
font-size: var(--font-size-xl);
}
.search-btn {
width: 100%;
margin-top: var(--space-sm);
}
.filters-section .col-6 {
margin-bottom: var(--space-sm);
}
.event-card-body {
padding: var(--space-md);
}
.event-title {
font-size: var(--font-size-lg);
}
.event-card-footer {
padding: var(--space-sm) var(--space-md);
flex-direction: column;
gap: var(--space-sm);
}
.view-details-btn {
width: 100%;
justify-content: center;
}
.share-btn {
display: none;
}
}
/* ============================================
ANIMATIONS
============================================ */
.fade-in {
animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }
/* Sticky Filter Button (Mobile) */
.sticky-filter-btn {
display: none;
position: fixed;
bottom: 90px;
right: 20px;
width: 60px;
height: 60px;
border-radius: var(--radius-full);
background: var(--gradient-primary);
color: white;
border: none;
box-shadow: var(--shadow-xl);
z-index: var(--z-fixed);
transition: all var(--transition-base);
}
.sticky-filter-btn:hover {
transform: scale(1.1);
}
@media (max-width: 768px) {
.sticky-filter-btn {
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
</head>
<body>
<!-- Scroll Progress Bar -->
<div class="scroll-progress" id="scrollProgress"></div>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top" id="navbar">
<div class="container">
<a class="navbar-brand" href="index.php">
<img src="assets/images/logo.png" alt="RCU Alumni">
<span>RCU Alumni</span>
</a>
<div class="d-flex align-items-center gap-3 order-lg-3">
<!-- Search Bar (Desktop) -->
<input type="text" class="nav-search d-none d-lg-block" placeholder="Search events..." id="navSearch">
<!-- Theme Toggle -->
<div class="theme-toggle" id="themeToggle" title="Toggle dark mode"></div>
<!-- Profile -->
<div class="user-avatar" title="<?php echo $row_student['name']; ?>">
<?php echo strtoupper(substr($row_student['name'], 0, 1)); ?>
</div>
</div>
<!-- Mobile Toggle -->
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<i class="bi bi-list fs-4"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="events.php">Events</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>
<!-- Hero Section -->
<section class="hero-section">
<div class="container position-relative">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h1 class="hero-title">Discover Upcoming Events</h1>
<p class="hero-subtitle">Stay connected with the latest events, workshops, and gatherings from RCU Alumni Network</p>
<!-- Search Box -->
<div class="search-box">
<form method="get" action="" class="row g-3">
<div class="col-md-5">
<input type="text" class="form-control search-input" placeholder="Search events..." name="q" value="<?php echo htmlspecialchars($q); ?>">
</div>
<div class="col-md-3">
<select class="form-select filter-select" name="category">
<option value="">All Categories</option>
<option value="workshop" <?php echo $category === 'workshop' ? 'selected' : ''; ?>>Workshop</option>
<option value="seminar" <?php echo $category === 'seminar' ? 'selected' : ''; ?>>Seminar</option>
<option value="reunion" <?php echo $category === 'reunion' ? 'selected' : ''; ?>>Reunion</option>
<option value="cultural" <?php echo $category === 'cultural' ? 'selected' : ''; ?>>Cultural</option>
</select>
</div>
<div class="col-md-2">
<input type="date" class="form-control filter-select" name="from" value="<?php echo htmlspecialchars($from); ?>">
</div>
<div class="col-md-2">
<button type="submit" class="search-btn w-100">
<i class="bi bi-search me-2"></i>Search
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Main Content -->
<main class="container py-5 mt-5">
<!-- Section Title -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h2 class="fw-bold mb-1">All Events</h2>
<p class="text-muted mb-0">Browse and discover amazing events</p>
</div>
<a href="events.php" class="btn btn-outline-secondary">
<i class="bi bi-arrow-clockwise me-2"></i>Clear Filters
</a>
</div>
<!-- Events Grid -->
<div class="events-grid" id="eventsGrid">
<?php
if ($sel_event && mysqli_num_rows($sel_event) > 0) {
$cardIndex = 0;
while ($res_event = mysqli_fetch_assoc($sel_event)) {
$cardIndex++;
$id = (int)$res_event['id'];
$event_name = htmlspecialchars($res_event['event_name'] ?? '');
$event_date = $res_event['event_date'] ?? '';
$event_photo = $res_event['event_photo'] ?? '';
$event_description = htmlspecialchars($res_event['event_description'] ?? '');
$event_location = htmlspecialchars($res_event['event_location'] ?? 'RCU Campus');
$event_time = htmlspecialchars($res_event['event_time'] ?? '10:00 AM');
$day = date('d', strtotime($event_date));
$month = date('M', strtotime($event_date));
// Build share URL
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? "https://" : "http://";
$host = $_SERVER['HTTP_HOST'];
$event_link = $protocol . $host . '/event-details.php?id=' . $id;
$whatsapp_text = rawurlencode($event_name . " - " . $event_link);
$whatsapp_url = "https://api.whatsapp.com/send?text=" . $whatsapp_text;
$staggerClass = 'stagger-' . (($cardIndex % 6) + 1);
?>
<div class="event-card fade-in <?php echo $staggerClass; ?>">
<div class="event-card-image">
<img src="<?php echo 'adminweb/' . $event_photo; ?>" alt="<?php echo $event_name; ?>" loading="lazy">
<div class="event-date-badge">
<div class="day"><?php echo $day; ?></div>
<div class="month"><?php echo $month; ?></div>
</div>
<div class="event-price-badge">
<i class="bi bi-ticket-perforated me-1"></i>Free
</div>
</div>
<div class="event-card-body">
<span class="event-category">Alumni Event</span>
<h3 class="event-title">
<a href="event-details.php?id=<?php echo $id; ?>" class="text-decoration-none text-reset"><?php echo $event_name; ?></a>
</h3>
<p class="event-description"><?php echo substr(strip_tags($event_description), 0, 100); ?>...</p>
<div class="event-meta">
<div class="event-meta-item">
<i class="bi bi-geo-alt"></i>
<span><?php echo $event_location; ?></span>
</div>
<div class="event-meta-item">
<i class="bi bi-clock"></i>
<span><?php echo $event_time; ?></span>
</div>
</div>
</div>
<div class="event-card-footer">
<a href="event-details.php?id=<?php echo $id; ?>" class="view-details-btn">
View Details
<i class="bi bi-arrow-right"></i>
</a>
<a href="<?php echo $whatsapp_url; ?>" target="_blank" class="share-btn" title="Share on WhatsApp">
<i class="bi bi-whatsapp"></i>
</a>
</div>
</div>
<?php
}
} else {
?>
<!-- Empty State -->
<div class="col-12">
<div class="empty-state">
<div class="empty-state-icon">
<i class="bi bi-calendar-event"></i>
</div>
<h3 class="empty-state-title">No Events Found</h3>
<p class="empty-state-text">We couldn't find any events matching your criteria. Try adjusting your filters or search terms.</p>
<a href="events.php" class="btn btn-primary mt-3">
<i class="bi bi-arrow-left me-2"></i>Browse All Events
</a>
</div>
</div>
<?php } ?>
</div>
</main>
<!-- Mobile Bottom Navigation -->
<nav class="mobile-bottom-nav">
<a href="events.php" class="mobile-bottom-nav-item active">
<i class="bi bi-calendar-event"></i>
<span>Events</span>
</a>
<a href="#" class="mobile-bottom-nav-item">
<i class="bi bi-search"></i>
<span>Search</span>
</a>
<a href="#" class="mobile-bottom-nav-item">
<i class="bi bi-bell"></i>
<span>Notifications</span>
</a>
<a href="#" class="mobile-bottom-nav-item">
<i class="bi bi-person"></i>
<span>Profile</span>
</a>
</nav>
<!-- Sticky Filter Button (Mobile) -->
<button class="sticky-filter-btn" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas">
<i class="bi bi-funnel fs-5"></i>
</button>
<!-- Toast Notification -->
<div class="toast-notification success" id="toast">
<div class="toast-icon">
<i class="bi bi-check-lg fs-5"></i>
</div>
<div>
<h6 class="fw-bold mb-0">Success!</h6>
<small class="text-muted">Link copied to clipboard</small>
</div>
</div>
<!-- Filter Offcanvas (Mobile) -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="filterOffcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Filter Events</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<form method="get" action="">
<div class="mb-3">
<label class="form-label">Search</label>
<input type="text" class="form-control" placeholder="Event name..." name="q" value="<?php echo htmlspecialchars($q); ?>">
</div>
<div class="mb-3">
<label class="form-label">Category</label>
<select class="form-select" name="category">
<option value="">All Categories</option>
<option value="workshop">Workshop</option>
<option value="seminar">Seminar</option>
<option value="reunion">Reunion</option>
</select>
</div>
<div class="row mb-3">
<div class="col-6">
<label class="form-label">From Date</label>
<input type="date" class="form-control" name="from" value="<?php echo htmlspecialchars($from); ?>">
</div>
<div class="col-6">
<label class="form-label">To Date</label>
<input type="date" class="form-control" name="to" value="<?php echo htmlspecialchars($to); ?>">
</div>
</div>
<button type="submit" class="btn btn-primary w-100">Apply Filters</button>
</form>
</div>
</div>
<!-- Footer -->
<footer class="bg-dark text-white py-4 mt-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
<p class="mb-0">© <?php echo date('Y'); ?> RCU Alumni Portal. All rights reserved.</p>
</div>
<div class="col-md-6 text-center text-md-end">
<a href="https://rcub.ac.in/" target="_blank" class="text-white-50 text-decoration-none">Rani Channamma University</a>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// ============================================
// SCROLL PROGRESS BAR
// ============================================
window.addEventListener('scroll', function() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollPercentage = (scrollTop / scrollHeight) * 100;
document.getElementById('scrollProgress').style.width = scrollPercentage + '%';
});
// ============================================
// NAVBAR SCROLL EFFECT
// ============================================
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// ============================================
// DARK MODE TOGGLE
// ============================================
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
// Check for saved theme preference
const savedTheme = localStorage.getItem('theme') || 'light';
body.setAttribute('data-theme', savedTheme);
if (savedTheme === 'dark') {
themeToggle.classList.add('active');
}
themeToggle.addEventListener('click', function() {
body.setAttribute('data-theme', body.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
localStorage.setItem('theme', body.getAttribute('data-theme'));
themeToggle.classList.toggle('active');
});
// ============================================
// COPY TO CLIPBOARD
// ============================================
function copyToClipboard(text) {
if (!text) return;
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(function() {
showToast();
});
} else {
// Fallback
var ta = document.createElement('textarea');
ta.value = text;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
showToast();
}
}
function showToast() {
const toast = document.getElementById('toast');
toast.classList.add('show');
setTimeout(function() {
toast.classList.remove('show');
}, 3000);
}
// ============================================
// SMOOTH SCROLL
// ============================================
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// ============================================
// INTERSECTION OBSERVER FOR ANIMATIONS
// ============================================
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.event-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
</script>
</body>
</html>
<?php include('footer.php'); ?>