|
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/alumini/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<?php
if(isset($_GET['id'])) {
$id = $_GET['id'];
include('header.php');
// Track event views
$student_id = $row_student['id'];
$view_on = date('Y-m-d H:i:s');
$sel_views = mysqli_query($con, "SELECT * FROM event_views WHERE student_id = '$student_id' AND event_id = '$id'");
if (mysqli_num_rows($sel_views) > 0) {
mysqli_query($con, "UPDATE event_views SET number_of_view = number_of_view + 1, view_on = '$view_on' WHERE student_id = '$student_id' AND event_id = '$id'");
} else {
mysqli_query($con, "INSERT INTO event_views (student_id, event_id, view_on, number_of_view) VALUES ('$student_id', '$id', '$view_on', 1)");
}
$sel_event = mysqli_query($con, "SELECT * FROM events WHERE is_active=1 AND id=$id");
$res_event = mysqli_fetch_array($sel_event);
if (!$res_event) {
echo "<script>window.location='events.php';</script>";
exit;
}
// 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($res_event['event_name'] . " - " . $event_link);
$whatsapp_url = "https://api.whatsapp.com/send?text=" . $whatsapp_text;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($res_event['event_name']); ?> | RCU Alumni Portal</title>
<meta name="description" content="<?php echo htmlspecialchars($res_event['event_name']); ?> - RCU Alumni Event">
<!-- 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: #6366f1;
--primary-dark: #4f46e5;
--primary-light: #818cf8;
--secondary: #64748b;
--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
--gradient-hero: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
--gradient-accent: linear-gradient(135deg, #f472b6 0%, #c084fc 100%);
--gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--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;
--font-size-5xl: 3rem;
--transition-fast: 0.15s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
--z-sticky: 100;
--z-fixed: 200;
--z-modal: 300;
--z-toast: 400;
}
[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);
}
: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;
}
* {
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);
padding-bottom: 80px;
}
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 4px;
background: var(--gradient-primary);
z-index: 1000;
transition: width 0.1s ease;
}
/* ============================================
HERO COVER SECTION
============================================ */
.event-hero {
position: relative;
height: 60vh;
min-height: 400px;
max-height: 600px;
overflow: hidden;
}
.event-hero-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.event-hero-overlay {
position: absolute;
inset: 0;
background: var(--gradient-overlay);
}
.event-hero-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-2xl);
color: white;
}
.back-btn {
position: absolute;
top: var(--space-xl);
left: var(--space-xl);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-full);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-sm);
transition: all var(--transition-base);
z-index: 10;
}
.back-btn:hover {
background: white;
color: var(--text-primary);
transform: translateX(-4px);
}
.event-category-badge {
display: inline-block;
background: var(--gradient-primary);
color: white;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
margin-bottom: var(--space-md);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.event-title {
font-size: var(--font-size-4xl);
font-weight: 800;
margin-bottom: var(--space-lg);
line-height: 1.2;
}
.event-meta-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-lg);
}
.event-meta-item {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-base);
}
.event-meta-item i {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
}
/* Share Buttons */
.share-buttons {
position: absolute;
top: var(--space-xl);
right: var(--space-xl);
display: flex;
gap: var(--space-sm);
z-index: 10;
}
.share-btn {
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-base);
cursor: pointer;
}
.share-btn:hover {
transform: scale(1.1);
}
.share-btn.whatsapp:hover {
background: #25D366;
border-color: #25D366;
}
.share-btn.copy:hover {
background: var(--primary);
border-color: var(--primary);
}
/* ============================================
MAIN CONTENT
============================================ */
.main-content {
margin-top: -60px;
position: relative;
z-index: 10;
}
.content-card {
background: var(--bg-card);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
padding: var(--space-xl);
margin-bottom: var(--space-xl);
border: 1px solid var(--border-color);
}
.section-title {
font-size: var(--font-size-2xl);
font-weight: 700;
margin-bottom: var(--space-lg);
display: flex;
align-items: center;
gap: var(--space-md);
}
.section-title i {
color: var(--primary);
}
/* About Section */
.about-text {
color: var(--text-secondary);
font-size: var(--font-size-base);
line-height: 1.8;
}
.highlight-box {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-top: var(--space-lg);
border-left: 4px solid var(--primary);
}
/* Stats */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-lg);
margin-top: var(--space-xl);
}
.stat-item {
text-align: center;
padding: var(--space-lg);
background: var(--bg-input);
border-radius: var(--radius-lg);
}
.stat-number {
font-size: var(--font-size-3xl);
font-weight: 800;
color: var(--primary);
}
.stat-label {
color: var(--text-muted);
font-size: var(--font-size-sm);
}
/* ============================================
SCHEDULE TIMELINE
============================================ */
.timeline {
position: relative;
padding-left: var(--space-xl);
}
.timeline::before {
content: '';
position: absolute;
left: 8px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-color);
}
.timeline-item {
position: relative;
padding-bottom: var(--space-xl);
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-dot {
position: absolute;
left: calc(-1 * var(--space-xl) + 2px);
top: 4px;
width: 14px;
height: 14px;
background: var(--primary);
border-radius: var(--radius-full);
border: 3px solid var(--bg-card);
}
.timeline-time {
font-weight: 600;
color: var(--primary);
font-size: var(--font-size-sm);
margin-bottom: var(--space-xs);
}
.timeline-title {
font-weight: 600;
font-size: var(--font-size-lg);
margin-bottom: var(--space-xs);
}
.timeline-desc {
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
/* ============================================
LOCATION SECTION
============================================ */
.map-container {
height: 300px;
background: var(--bg-input);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-lg);
overflow: hidden;
}
.map-placeholder {
text-align: center;
color: var(--text-muted);
}
.map-placeholder i {
font-size: 48px;
margin-bottom: var(--space-md);
color: var(--primary);
}
.address-card {
background: var(--bg-input);
border-radius: var(--radius-lg);
padding: var(--space-lg);
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.address-icon {
width: 50px;
height: 50px;
background: var(--gradient-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-xl);
flex-shrink: 0;
}
.address-details h5 {
font-weight: 600;
margin-bottom: var(--space-xs);
}
.address-details p {
color: var(--text-secondary);
margin: 0;
font-size: var(--font-size-sm);
}
/* ============================================
ORGANIZER SECTION
============================================ */
.organizer-card {
display: flex;
align-items: center;
gap: var(--space-lg);
background: var(--bg-input);
border-radius: var(--radius-lg);
padding: var(--space-lg);
}
.organizer-avatar {
width: 80px;
height: 80px;
background: var(--gradient-primary);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-2xl);
font-weight: 700;
flex-shrink: 0;
}
.organizer-info h4 {
font-weight: 700;
margin-bottom: var(--space-xs);
}
.organizer-info p {
color: var(--text-muted);
font-size: var(--font-size-sm);
margin-bottom: var(--space-sm);
}
.organizer-contact-btn {
background: var(--gradient-primary);
color: white;
border: none;
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
font-weight: 600;
font-size: var(--font-size-sm);
transition: all var(--transition-base);
}
.organizer-contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
color: white;
}
/* ============================================
TICKET SECTION
============================================ */
.ticket-card {
background: var(--bg-card);
border: 2px solid var(--border-color);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-bottom: var(--space-md);
transition: all var(--transition-base);
}
.ticket-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-card);
}
.ticket-card.selected {
border-color: var(--primary);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
}
.ticket-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-md);
}
.ticket-type {
font-size: var(--font-size-lg);
font-weight: 700;
}
.ticket-price {
font-size: var(--font-size-2xl);
font-weight: 800;
color: var(--primary);
}
.ticket-features {
list-style: none;
padding: 0;
margin: 0 0 var(--space-md) 0;
}
.ticket-features li {
display: flex;
align-items: center;
gap: var(--space-sm);
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--space-xs);
}
.ticket-features li i {
color: #10b981;
}
.quantity-selector {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.quantity-btn {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--bg-input);
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-base);
}
.quantity-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.quantity-value {
font-size: var(--font-size-xl);
font-weight: 700;
min-width: 40px;
text-align: center;
}
.book-btn {
width: 100%;
background: var(--gradient-primary);
color: white;
border: none;
padding: var(--space-lg);
border-radius: var(--radius-lg);
font-size: var(--font-size-lg);
font-weight: 700;
transition: all var(--transition-base);
}
.book-btn:hover {
transform: translateY(-4px);
box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}
/* Sticky Book Button (Mobile) */
.sticky-book-btn {
display: none;
position: fixed;
bottom: 70px;
left: var(--space-md);
right: var(--space-md);
background: var(--gradient-primary);
color: white;
border: none;
padding: var(--space-md) var(--space-xl);
border-radius: var(--radius-lg);
font-weight: 700;
box-shadow: var(--shadow-xl);
z-index: var(--z-fixed);
transition: all var(--transition-base);
}
.sticky-book-btn:hover {
transform: translateY(-2px);
}
/* ============================================
RELATED EVENTS
============================================ */
.related-events-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-lg);
}
.related-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);
}
.related-event-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.related-event-image {
height: 160px;
overflow: hidden;
}
.related-event-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.related-event-card:hover .related-event-image img {
transform: scale(1.05);
}
.related-event-body {
padding: var(--space-md);
}
.related-event-date {
color: var(--primary);
font-size: var(--font-size-sm);
font-weight: 600;
}
.related-event-title {
font-weight: 700;
font-size: var(--font-size-base);
margin: var(--space-xs) 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ============================================
THEME 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);
}
.theme-toggle.active::before {
transform: translateX(24px);
}
/* ============================================
MOBILE 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
============================================ */
.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;
}
/* ============================================
ANIMATIONS
============================================ */
.fade-in {
animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 991px) {
.event-title {
font-size: var(--font-size-3xl);
}
.event-meta-grid {
gap: var(--space-md);
}
}
@media (max-width: 768px) {
.event-hero {
height: 50vh;
min-height: 350px;
}
.event-hero-content {
padding: var(--space-lg);
}
.event-title {
font-size: var(--font-size-2xl);
}
.back-btn {
top: var(--space-md);
left: var(--space-md);
padding: var(--space-xs) var(--space-md);
font-size: var(--font-size-sm);
}
.share-buttons {
top: var(--space-md);
right: var(--space-md);
}
.share-btn {
width: 40px;
height: 40px;
}
.content-card {
padding: var(--space-lg);
border-radius: var(--radius-lg);
}
.main-content {
margin-top: -40px;
}
.mobile-bottom-nav {
display: flex;
justify-content: space-around;
}
.sticky-book-btn {
display: block;
}
.ticket-section {
display: none;
}
body {
padding-bottom: 140px;
}
}
@media (max-width: 480px) {
.event-hero {
height: 45vh;
}
.event-title {
font-size: var(--font-size-xl);
}
.event-meta-item {
font-size: var(--font-size-sm);
}
.event-meta-item i {
width: 32px;
height: 32px;
font-size: var(--font-size-sm);
}
.organizer-card {
flex-direction: column;
text-align: center;
}
.related-events-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Scroll Progress -->
<div class="scroll-progress" id="scrollProgress"></div>
<!-- Hero Section -->
<section class="event-hero">
<img src="adminweb/<?php echo $res_event['event_photo']; ?>" alt="<?php echo htmlspecialchars($res_event['event_name']); ?>" class="event-hero-image">
<div class="event-hero-overlay"></div>
<!-- Back Button -->
<a href="events.php" class="back-btn">
<i class="bi bi-arrow-left"></i>
<span class="d-none d-sm-inline">Back to Events</span>
</a>
<!-- Share Buttons -->
<div class="share-buttons">
<a href="<?php echo $whatsapp_url; ?>" target="_blank" class="share-btn whatsapp" title="Share on WhatsApp">
<i class="bi bi-whatsapp"></i>
</a>
<button class="share-btn copy" onclick="copyToClipboard('<?php echo $event_link; ?>')" title="Copy Link">
<i class="bi bi-link-45deg"></i>
</button>
<div class="theme-toggle" id="themeToggle" title="Toggle dark mode"></div>
</div>
<!-- Hero Content -->
<div class="event-hero-content">
<span class="event-category-badge">Alumni Event</span>
<h1 class="event-title"><?php echo htmlspecialchars($res_event['event_name']); ?></h1>
<div class="event-meta-grid">
<div class="event-meta-item">
<i class="bi bi-calendar3"></i>
<span><?php echo date('l, M d, Y', strtotime($res_event['event_date'])); ?></span>
</div>
<div class="event-meta-item">
<i class="bi bi-clock"></i>
<span><?php echo htmlspecialchars($res_event['event_time'] ?? '10:00 AM'); ?></span>
</div>
<div class="event-meta-item">
<i class="bi bi-geo-alt"></i>
<span><?php echo htmlspecialchars($res_event['event_location'] ?? 'RCU Campus'); ?></span>
</div>
</div>
</div>
</section>
<!-- Main Content -->
<main class="main-content">
<div class="container">
<div class="row">
<!-- Left Column -->
<div class="col-lg-8">
<!-- About Section -->
<div class="content-card fade-in">
<h2 class="section-title">
<i class="bi bi-info-circle"></i>
About Event
</h2>
<div class="about-text">
<?php echo $res_event['event_description']; ?>
</div>
<!-- Stats -->
<div class="stats-grid">
<div class="stat-item">
<div class="stat-number"><?php echo mysqli_num_rows(mysqli_query($con, "SELECT * FROM event_views WHERE event_id = $id")); ?></div>
<div class="stat-label">Views</div>
</div>
<div class="stat-item">
<div class="stat-number">50</div>
<div class="stat-label">Interested</div>
</div>
<div class="stat-item">
<div class="stat-number">25</div>
<div class="stat-label">Attending</div>
</div>
</div>
</div>
<!-- Schedule Section -->
<div class="content-card fade-in stagger-1">
<h2 class="section-title">
<i class="bi bi-clock-history"></i>
Event Schedule
</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-time">09:00 AM - 10:00 AM</div>
<div class="timeline-title">Registration & Welcome</div>
<div class="timeline-desc">Check-in and networking breakfast</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-time">10:00 AM - 12:00 PM</div>
<div class="timeline-title">Main Event</div>
<div class="timeline-desc">Keynote sessions and presentations</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-time">12:00 PM - 01:00 PM</div>
<div class="timeline-title">Networking Lunch</div>
<div class="timeline-desc">Connect with fellow alumni</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-time">01:00 PM - 04:00 PM</div>
<div class="timeline-title">Workshops & Activities</div>
<div class="timeline-desc">Interactive sessions and group activities</div>
</div>
</div>
</div>
<!-- Location Section -->
<div class="content-card fade-in stagger-2">
<h2 class="section-title">
<i class="bi bi-geo"></i>
Location
</h2>
<div class="map-container">
<div class="map-placeholder">
<i class="bi bi-map"></i>
<p>Map View</p>
<small><?php echo htmlspecialchars($res_event['event_location'] ?? 'RCU Campus, Belagavi'); ?></small>
</div>
</div>
<div class="address-card">
<div class="address-icon">
<i class="bi bi-building"></i>
</div>
<div class="address-details">
<h5><?php echo htmlspecialchars($res_event['event_location'] ?? 'Rani Channamma University'); ?></h5>
<p>NH-4, Belagavi-Karnataka<br>Belagavi - 591156, Karnataka, India</p>
</div>
</div>
</div>
<!-- Organizer Section -->
<div class="content-card fade-in stagger-3">
<h2 class="section-title">
<i class="bi bi-person-badge"></i>
Organizer
</h2>
<div class="organizer-card">
<div class="organizer-avatar">RCU</div>
<div class="organizer-info">
<h4>RCU Alumni Association</h4>
<p>Rani Channamma University, Belagavi</p>
<button class="organizer-contact-btn">
<i class="bi bi-envelope me-2"></i>Contact Organizer
</button>
</div>
</div>
</div>
</div>
<!-- Right Column - Ticket Section -->
<div class="col-lg-4">
<div class="content-card ticket-section" style="position: sticky; top: 100px;">
<h2 class="section-title">
<i class="bi bi-ticket-perforated"></i>
Get Tickets
</h2>
<!-- Ticket Type -->
<div class="ticket-card selected">
<div class="ticket-header">
<div>
<div class="ticket-type">General Admission</div>
<small class="text-muted">Alumni & Guests</small>
</div>
<div class="ticket-price">Free</div>
</div>
<ul class="ticket-features">
<li><i class="bi bi-check-circle-fill"></i> Full event access</li>
<li><i class="bi bi-check-circle-fill"></i> Networking session</li>
<li><i class="bi bi-check-circle-fill"></i> Certificate of participation</li>
</ul>
</div>
<!-- Quantity -->
<div class="quantity-selector">
<span class="text-muted">Quantity:</span>
<button class="quantity-btn" onclick="updateQuantity(-1)">
<i class="bi bi-dash"></i>
</button>
<span class="quantity-value" id="quantityValue">1</span>
<button class="quantity-btn" onclick="updateQuantity(1)">
<i class="bi bi-plus"></i>
</button>
</div>
<!-- Book Button -->
<button class="book-btn">
<i class="bi bi-ticket-perforated me-2"></i>
Register Now
</button>
<p class="text-center text-muted mt-3 mb-0">
<small><i class="bi bi-shield-check me-1"></i>Secure registration</small>
</p>
</div>
</div>
</div>
<!-- Related Events -->
<div class="content-card">
<h2 class="section-title">
<i class="bi bi-calendar-range"></i>
Related Events
</h2>
<div class="related-events-grid">
<?php
$related_query = "SELECT * FROM events WHERE is_active = 1 AND id != $id ORDER BY event_date DESC LIMIT 3";
$sel_related = mysqli_query($con, $related_query);
if ($sel_related && mysqli_num_rows($sel_related) > 0) {
while ($related = mysqli_fetch_assoc($sel_related)) {
?>
<a href="event-details.php?id=<?php echo $related['id']; ?>" class="related-event-card text-decoration-none">
<div class="related-event-image">
<img src="adminweb/<?php echo $related['event_photo']; ?>" alt="<?php echo htmlspecialchars($related['event_name']); ?>">
</div>
<div class="related-event-body">
<div class="related-event-date">
<i class="bi bi-calendar3 me-1"></i>
<?php echo date('M d, Y', strtotime($related['event_date'])); ?>
</div>
<h4 class="related-event-title text-reset">
<?php echo htmlspecialchars($related['event_name']); ?>
</h4>
<div class="text-muted" style="font-size: 0.875rem;">
<i class="bi bi-geo-alt me-1"></i>
<?php echo htmlspecialchars($related['event_location'] ?? 'RCU Campus'); ?>
</div>
</div>
</a>
<?php
}
} else {
?>
<div class="col-12 text-center py-4">
<p class="text-muted">No related events found</p>
</div>
<?php } ?>
</div>
</div>
</div>
</main>
<!-- Mobile Bottom Nav -->
<nav class="mobile-bottom-nav">
<a href="events.php" class="mobile-bottom-nav-item">
<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 active">
<i class="bi bi-ticket-perforated"></i>
<span>Register</span>
</a>
<a href="#" class="mobile-bottom-nav-item">
<i class="bi bi-person"></i>
<span>Profile</span>
</a>
</nav>
<!-- Sticky Book Button (Mobile) -->
<button class="sticky-book-btn">
<i class="bi bi-ticket-perforated me-2"></i>Register Now - Free
</button>
<!-- Toast -->
<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>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Scroll Progress
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 + '%';
});
// Theme Toggle
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
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');
});
// Quantity Selector
let quantity = 1;
function updateQuantity(delta) {
quantity = Math.max(1, quantity + delta);
document.getElementById('quantityValue').textContent = quantity;
}
// Copy to Clipboard
function copyToClipboard(text) {
if (!text) return;
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(function() {
showToast();
});
} else {
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);
}
// 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('.content-card').forEach(card => {
if (!card.classList.contains('ticket-section')) {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
}
});
// Smooth scroll for anchor links
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'
});
}
});
});
</script>
</body>
</html>
<?php include('footer.php'); ?>
<?php
} else {
echo "<script>window.location='events.php';</script>";
}
?>