Sindbad~EG File Manager
<?php
session_start();
require_once 'includes/functions.php';
$db = new CopMadinaDB();
$conn = $db->getConnection();
// Check if user is logged in
$is_logged_in = isset($_SESSION['user_id']);
$user_name = $is_logged_in ? (isset($_SESSION['username']) ? $_SESSION['username'] : 'User') : null;
// Get upcoming events with area/district/assembly info - limited to 3 for slider
$events_query = "
SELECT e.*, a.name as area_name, d.name as district_name, ass.name as assembly_name,
COALESCE(
(SELECT COUNT(*) FROM event_registrations er WHERE er.event_id = e.id AND er.status != 'cancelled') +
(SELECT COUNT(*) FROM nonmember_registrations nr WHERE nr.event_id = e.id AND nr.status != 'cancelled'),
0
) as registration_count
FROM events e
LEFT JOIN areas a ON e.area_id = a.id
LEFT JOIN districts d ON e.district_id = d.id
LEFT JOIN assemblies ass ON e.assembly_id = ass.id
WHERE e.status = 'published'
ORDER BY e.start_date ASC
LIMIT 3
";
$stmt = executeQuery($events_query);
$upcoming_events = $stmt ? $stmt->fetchAll() : [];
// Get featured/recent event for hero section
$featured_event = !empty($upcoming_events) ? $upcoming_events[0] : null;
// Get areas for navigation
$stmt = executeQuery("SELECT id, name FROM areas WHERE status = 'active' ORDER BY name");
$areas = $stmt ? $stmt->fetchAll() : [];
// Get districts for navigation
$stmt = executeQuery("SELECT id, name FROM districts WHERE status = 'active' ORDER BY name");
$districts = $stmt ? $stmt->fetchAll() : [];
// Get assemblies for navigation
$stmt = executeQuery("SELECT id, name FROM assemblies WHERE status = 'active' ORDER BY name");
$assemblies = $stmt ? $stmt->fetchAll() : [];
// Get settings for site branding
$settings = getSettings();
?>
<!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($settings['site_name'] ?? 'COP Madina Conference'); ?> - Church Events & Registration</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
animation: {
'fade-in': 'fadeIn 0.8s ease-in-out',
'slide-up': 'slideUp 0.6s ease-out',
'bounce-slow': 'bounce 2s infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' }
},
slideUp: {
'0%': { opacity: '0', transform: 'translateY(30px)' },
'100%': { opacity: '1', transform: 'translateY(0)' }
}
}
}
}
}
</script>
</head>
<body class="bg-gradient-to-br from-slate-50 to-blue-50 min-h-screen">
<div id="app">
<!-- Navigation -->
<nav class="bg-gradient-to-r from-blue-500 via-slate-600 to-violet-400 shadow-lg border-b border-slate-200/50 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center space-x-3">
<?php if (!empty($settings['site_logo'])): ?>
<img src="<?php echo BASE_URL . $settings['site_logo']; ?>"
alt="<?php echo htmlspecialchars($settings['site_name'] ?? 'COP Madina'); ?>"
class="h-12 w-12 rounded-full object-cover">
<?php else: ?>
<div class="p-2 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600">
<i class="fas fa-church text-white text-xl"></i>
</div>
<?php endif; ?>
<div>
<h1 class="text-xl font-bold text-white drop-shadow-lg">
<?php echo htmlspecialchars($settings['site_name'] ?? 'COP Madina'); ?>
</h1>
<p class="text-xs text-white/80"><?php echo htmlspecialchars($settings['site_description'] ?? 'Conference Platform'); ?></p>
</div>
</div>
<!-- Navigation Links -->
<div class="hidden md:flex items-center space-x-6">
<a href="#home" class="text-white/90 hover:text-white font-medium transition-colors">Home</a>
<a href="check-event.php" class="text-white/90 hover:text-white font-medium transition-colors">Check Event</a>
<a href="check-in.php" class="text-white/90 hover:text-white font-medium transition-colors">
<i class="fas fa-sign-in-alt mr-2"></i>Check-In
</a>
<a href="attendance-status.php" class="text-white/90 hover:text-white font-medium transition-colors">
<i class="fas fa-clock mr-2"></i>Status
</a>
<?php if ($is_logged_in): ?>
<div class="relative group">
<button class="px-4 py-2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white font-medium rounded-lg transition-all duration-200 border border-white/30 hover:border-white/50 flex items-center">
<i class="fas fa-user mr-2"></i><?php echo htmlspecialchars($user_name); ?> <i class="fas fa-chevron-down ml-2 text-xs"></i>
</button>
<div class="absolute top-full right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-slate-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
<a href="dashboard.php" class="block px-4 py-2 text-slate-700 hover:bg-blue-50 hover:text-blue-600 transition-colors">
<i class="fas fa-tachometer-alt mr-2"></i>Dashboard
</a>
<a href="profile.php" class="block px-4 py-2 text-slate-700 hover:bg-blue-50 hover:text-blue-600 transition-colors">
<i class="fas fa-user-edit mr-2"></i>Profile
</a>
<div class="border-t border-slate-200 my-1"></div>
<a href="register.php" class="text-slate-600 hover:text-blue-600 transition-colors">
<i class="fas fa-calendar-plus mr-2"></i>Register for Events
</a>
<a href="logout.php" class="block px-4 py-2 text-red-600 hover:bg-red-50 transition-colors">
<i class="fas fa-sign-out-alt mr-2"></i>Logout
</a>
</div>
</div>
<?php else: ?>
<a href="login.php" class="px-4 py-2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white font-medium rounded-lg transition-all duration-200 border border-white/30 hover:border-white/50">
<i class="fas fa-sign-in-alt mr-2"></i>Login
</a>
<?php endif; ?>
</div>
<!-- Mobile menu button -->
<div class="md:hidden">
<button @click="mobileMenuOpen = !mobileMenuOpen" class="p-2 rounded-lg hover:bg-white/20 transition-colors">
<i class="fas fa-bars text-white"></i>
</button>
</div>
</div>
<!-- Mobile menu -->
<div v-show="mobileMenuOpen" class="md:hidden py-4 border-t border-white/20">
<div class="space-y-2">
<a href="#home" class="block px-4 py-2 text-white/90 hover:bg-white/20 rounded-lg transition-colors">Home</a>
<a href="check-event.php" class="block px-4 py-2 text-white/90 hover:bg-white/20 rounded-lg transition-colors">Check Event</a>
<?php if ($is_logged_in): ?>
<a href="dashboard.php" class="block px-4 py-2 text-white/90 hover:bg-white/20 rounded-lg transition-colors">
<i class="fas fa-tachometer-alt mr-2"></i>Dashboard
</a>
<a href="profile.php" class="block px-4 py-2 text-white/90 hover:bg-white/20 rounded-lg transition-colors">
<i class="fas fa-user-edit mr-2"></i>Profile
</a>
<a href="logout.php" class="block px-4 py-2 bg-red-500/20 backdrop-blur-sm text-white rounded-lg transition-colors border border-red-400/30">
<i class="fas fa-sign-out-alt mr-2"></i>Logout
</a>
<?php else: ?>
<a href="login.php" class="block px-4 py-2 bg-white/20 backdrop-blur-sm text-white rounded-lg transition-colors border border-white/30">Login</a>
<?php endif; ?>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="relative py-20 overflow-hidden bg-gradient-to-br from-blue-600 via-slate-600 to-yellow-500">
<!-- Background Effects -->
<div class="absolute inset-0 bg-gradient-to-tr from-blue-500/20 via-slate-500/10 to-yellow-400/20"></div>
<div class="absolute top-0 left-0 w-96 h-96 bg-blue-400/10 rounded-full blur-3xl transform -translate-x-48 -translate-y-48"></div>
<div class="absolute top-1/2 right-0 w-80 h-80 bg-yellow-400/15 rounded-full blur-2xl transform translate-x-40"></div>
<div class="absolute bottom-0 left-1/3 w-64 h-64 bg-slate-400/10 rounded-full blur-xl transform translate-y-32"></div>
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center animate-fade-in">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6 drop-shadow-lg">
Welcome to
<span class="bg-gradient-to-r from-yellow-300 to-blue-200 bg-clip-text text-transparent">
COP Madina Area
</span>
</h1>
<p class="text-xl text-white/90 mb-8 max-w-3xl mx-auto drop-shadow-md">
Join us for inspiring conferences, spiritual growth, and community fellowship.
Register for upcoming events and be part of our vibrant church community.
</p>
<?php if ($featured_event): ?>
<!-- Featured Event Countdown -->
<div class="relative bg-gradient-to-br from-blue-500 via-blue-600 to-yellow-400 rounded-2xl shadow-2xl p-8 mb-8 max-w-2xl mx-auto border border-blue-300/30 overflow-hidden">
<!-- Background Effects -->
<div class="absolute inset-0 bg-gradient-to-tr from-blue-600/20 via-transparent to-yellow-300/20"></div>
<div class="absolute top-0 right-0 w-32 h-32 bg-yellow-300/20 rounded-full blur-2xl transform translate-x-16 -translate-y-16"></div>
<div class="absolute bottom-0 left-0 w-24 h-24 bg-blue-400/30 rounded-full blur-xl transform -translate-x-12 translate-y-12"></div>
<!-- Content -->
<div class="relative z-10">
<h3 class="text-2xl font-bold text-white mb-4 drop-shadow-lg">Featured Event</h3>
<h4 class="text-xl font-semibold text-yellow-100 mb-2 drop-shadow-md"><?php echo htmlspecialchars($featured_event['title']); ?></h4>
<p class="text-white/90 mb-4 drop-shadow-sm"><?php echo date('F j, Y', strtotime($featured_event['start_date'])); ?>
<?php if (!empty($featured_event['start_date'])): ?>
at <?php echo date('g:i A', strtotime($featured_event['start_date'])); ?>
<?php endif; ?></p>
<!-- Countdown Timer -->
<div class="grid grid-cols-4 gap-4 mb-6" id="countdown-<?php echo $featured_event['id']; ?>">
<div class="text-center bg-white/20 backdrop-blur-sm rounded-xl p-3 border border-white/30">
<div class="text-2xl font-bold text-white drop-shadow-lg" id="days">00</div>
<div class="text-sm text-white/80">Days</div>
</div>
<div class="text-center bg-white/20 backdrop-blur-sm rounded-xl p-3 border border-white/30">
<div class="text-2xl font-bold text-white drop-shadow-lg" id="hours">00</div>
<div class="text-sm text-white/80">Hours</div>
</div>
<div class="text-center bg-white/20 backdrop-blur-sm rounded-xl p-3 border border-white/30">
<div class="text-2xl font-bold text-white drop-shadow-lg" id="minutes">00</div>
<div class="text-sm text-white/80">Minutes</div>
</div>
<div class="text-center bg-white/20 backdrop-blur-sm rounded-xl p-3 border border-white/30">
<div class="text-2xl font-bold text-white drop-shadow-lg" id="seconds">00</div>
<div class="text-sm text-white/80">Seconds</div>
</div>
</div>
<a href="register.php?event=<?php echo $featured_event['id']; ?>"
class="inline-flex items-center px-6 py-3 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white font-medium rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl border border-white/30 hover:border-white/50">
<i class="fas fa-calendar-plus mr-2"></i>
Register for Event
</a>
</div>
</div>
<?php endif; ?>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#events" class="px-8 py-4 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white font-medium rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl border border-white/30 hover:border-white/50">
<i class="fas fa-calendar-alt mr-2"></i>
View All Events
</a>
<a href="join.php" class="px-8 py-4 bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-slate-800 font-medium rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl">
<i class="fas fa-user-plus mr-2"></i>
Join Our Community
</a>
</div>
</div>
</div>
</section>
<!-- Events Section -->
<section id="events" class="py-20 bg-white/30 backdrop-blur-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-4">Upcoming Events</h2>
<p class="text-xl text-slate-600 max-w-2xl mx-auto">
Discover inspiring conferences, workshops, and fellowship opportunities across our church community.
</p>
</div>
<!-- Events Slider Container -->
<div class="relative overflow-hidden">
<!-- Slider Wrapper -->
<div class="events-slider-wrapper" id="eventsSlider">
<div class="events-slider flex transition-transform duration-500 ease-in-out">
<?php foreach ($upcoming_events as $index => $event): ?>
<div class="flex-none w-full md:w-1/2 lg:w-1/3 px-4">
<div class="group bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-slate-200/50 hover:border-blue-300/50 animate-slide-up"
style="animation-delay: <?php echo $index * 0.1; ?>s">
<!-- Event Header -->
<div class="flex items-start justify-between mb-4">
<div class="flex-1">
<h3 class="text-xl font-bold text-slate-800 mb-2"><?php echo htmlspecialchars($event['title']); ?></h3>
<div class="space-y-1 text-sm">
<?php if (!empty($event['area_name'])): ?>
<p class="text-blue-600 font-medium"><?php echo htmlspecialchars($event['area_name']); ?></p>
<?php endif; ?>
<?php if (!empty($event['district_name'])): ?>
<p class="text-emerald-600"><?php echo htmlspecialchars($event['district_name']); ?></p>
<?php endif; ?>
<?php if (!empty($event['assembly_name'])): ?>
<p class="text-purple-600"><?php echo htmlspecialchars($event['assembly_name']); ?></p>
<?php endif; ?>
</div>
</div>
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-emerald-100 text-emerald-800">
<?php echo ucfirst($event['status']); ?>
</span>
</div>
<!-- Event Details -->
<div class="space-y-3 mb-4">
<div class="flex items-center text-sm text-slate-600">
<i class="fas fa-calendar mr-3 text-blue-500"></i>
<?php echo date('M j, Y', strtotime($event['start_date'])); ?>
<?php if (!empty($event['start_date'])): ?>
at <?php echo date('g:i A', strtotime($event['start_date'])); ?>
<?php endif; ?>
</div>
<?php if (!empty($event['location'])): ?>
<div class="flex items-center text-sm text-slate-600">
<i class="fas fa-map-marker-alt mr-3 text-blue-500"></i>
<?php echo htmlspecialchars($event['location']); ?>
</div>
<?php endif; ?>
<?php if ($event['registration_fee'] > 0): ?>
<div class="flex items-center text-sm text-slate-600">
<i class="fas fa-dollar-sign mr-3 text-blue-500"></i>
Fee: GH₵<?php echo number_format($event['registration_fee'], 2); ?>
</div>
<?php else: ?>
<div class="flex items-center text-sm text-emerald-600">
<i class="fas fa-gift mr-3"></i>
Free Event
</div>
<?php endif; ?>
</div>
<!-- Description -->
<?php if (!empty($event['description'])): ?>
<p class="text-sm text-slate-600 mb-4 line-clamp-3"><?php echo htmlspecialchars($event['description']); ?></p>
<?php endif; ?>
<!-- Registration Count -->
<div class="text-center p-3 bg-blue-50 rounded-xl mb-4">
<div class="text-lg font-bold text-blue-600"><?php echo $event['registration_count']; ?></div>
<div class="text-xs text-slate-600">Registered</div>
</div>
<!-- Action Button -->
<div class="text-center">
<a href="event.php?id=<?php echo $event['id']; ?>"
class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-medium rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl">
<i class="fas fa-info-circle mr-2"></i>
View Details
</a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Slider Navigation -->
<?php if (count($upcoming_events) > 1): ?>
<div class="flex justify-center items-center mt-8 space-x-4">
<button id="prevSlide" class="p-3 rounded-full bg-white/70 backdrop-blur-sm shadow-lg hover:shadow-xl transition-all duration-200 border border-slate-200/50 hover:border-blue-300/50">
<i class="fas fa-chevron-left text-slate-700"></i>
</button>
<div class="flex space-x-2" id="sliderDots">
<?php for ($i = 0; $i < count($upcoming_events); $i++): ?>
<button class="slider-dot w-3 h-3 rounded-full transition-all duration-200 <?php echo $i === 0 ? 'bg-blue-600' : 'bg-slate-300'; ?>" data-slide="<?php echo $i; ?>"></button>
<?php endfor; ?>
</div>
<button id="nextSlide" class="p-3 rounded-full bg-white/70 backdrop-blur-sm shadow-lg hover:shadow-xl transition-all duration-200 border border-slate-200/50 hover:border-blue-300/50">
<i class="fas fa-chevron-right text-slate-700"></i>
</button>
</div>
<?php endif; ?>
</div>
<!-- Empty State -->
<?php if (empty($upcoming_events)): ?>
<div class="text-center py-16">
<div class="mx-auto w-24 h-24 bg-slate-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-calendar-alt text-3xl text-slate-400"></i>
</div>
<h3 class="text-xl font-semibold text-slate-700 mb-2">No Upcoming Events</h3>
<p class="text-slate-500 mb-6">Check back soon for new events and conferences.</p>
<a href="join.php" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-medium rounded-xl transition-all duration-200">
Join Our Community
</a>
</div>
<?php endif; ?>
</div>
</section>
<!-- Footer -->
<footer class="bg-slate-800 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- Logo & Description -->
<div class="md:col-span-2">
<div class="flex items-center space-x-3 mb-4">
<?php if (!empty($settings['site_logo'])): ?>
<img src="<?php echo BASE_URL . $settings['site_logo']; ?>"
alt="<?php echo htmlspecialchars($settings['site_name'] ?? 'COP Madina'); ?>"
class="h-10 w-10 rounded-full object-cover">
<?php else: ?>
<div class="p-2 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600">
<i class="fas fa-church text-white text-xl"></i>
</div>
<?php endif; ?>
<div>
<h3 class="text-xl font-bold"><?php echo htmlspecialchars($settings['site_name'] ?? 'COP Madina'); ?></h3>
<p class="text-slate-300 text-sm"><?php echo htmlspecialchars($settings['site_description'] ?? 'Conference Platform'); ?></p>
</div>
</div>
<p class="text-slate-300 mb-4">
<?php echo htmlspecialchars($settings['footer_text'] ?? 'Join us for transformative conferences, workshops, and spiritual gatherings. Experience fellowship, learning, and growth in our vibrant church community.'); ?>
</p>
<div class="flex space-x-4">
<?php if (!empty($settings['social_facebook'])): ?>
<a href="<?php echo htmlspecialchars($settings['social_facebook']); ?>" class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors">
<i class="fab fa-facebook-f"></i>
</a>
<?php endif; ?>
<?php if (!empty($settings['social_twitter'])): ?>
<a href="<?php echo htmlspecialchars($settings['social_twitter']); ?>" class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors">
<i class="fab fa-twitter"></i>
</a>
<?php endif; ?>
<?php if (!empty($settings['social_instagram'])): ?>
<a href="<?php echo htmlspecialchars($settings['social_instagram']); ?>" class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors">
<i class="fab fa-instagram"></i>
</a>
<?php endif; ?>
<?php if (!empty($settings['social_youtube'])): ?>
<a href="<?php echo htmlspecialchars($settings['social_youtube']); ?>" class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors">
<i class="fab fa-youtube"></i>
</a>
<?php endif; ?>
</div>
</div>
<!-- Quick Links -->
<div>
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-slate-300 hover:text-white transition-colors">Home</a></li>
<li><a href="#events" class="text-slate-300 hover:text-white transition-colors">Events</a></li>
<li><a href="join.php" class="text-slate-300 hover:text-white transition-colors">Join</a></li>
<li><a href="login.php" class="text-slate-300 hover:text-white transition-colors">Login</a></li>
</ul>
</div>
<!-- Contact Info -->
<div>
<h4 class="text-lg font-semibold mb-4">Contact</h4>
<ul class="space-y-2 text-slate-300">
<li class="flex items-center">
<i class="fas fa-envelope mr-2"></i>
info@copmadinaconf.org
</li>
<li class="flex items-center">
<i class="fas fa-phone mr-2"></i>
+233 XX XXX XXXX
</li>
<li class="flex items-center">
<i class="fas fa-map-marker-alt mr-2"></i>
Madina, Accra, Ghana
</li>
</ul>
</div>
</div>
<div class="border-t border-slate-700 mt-8 pt-8 text-center">
<p class="text-slate-400">
© <?php echo date('Y'); ?> Church of Pentecost - Madina Area. All rights reserved.
</p>
</div>
</div>
</footer>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
mobileMenuOpen: false,
currentSlide: 0,
totalSlides: <?php echo count($upcoming_events); ?>,
autoSlideTimer: null
}
},
mounted() {
// Initialize countdown timer for featured event
<?php if ($featured_event): ?>
this.startCountdown('<?php echo $featured_event['start_date']; ?>');
<?php endif; ?>
// Initialize slider
this.initializeSlider();
},
methods: {
startCountdown(eventDateTime) {
// Parse the datetime string properly
const eventDate = new Date(eventDateTime).getTime();
// Check if date is valid
if (isNaN(eventDate)) {
console.error('Invalid event date:', eventDateTime);
return;
}
const updateCountdown = () => {
const now = new Date().getTime();
const distance = eventDate - now;
if (distance < 0) {
// Event has passed
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Update DOM elements if they exist
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');
if (daysEl) daysEl.textContent = days.toString().padStart(2, '0');
if (hoursEl) hoursEl.textContent = hours.toString().padStart(2, '0');
if (minutesEl) minutesEl.textContent = minutes.toString().padStart(2, '0');
if (secondsEl) secondsEl.textContent = seconds.toString().padStart(2, '0');
};
// Update immediately
updateCountdown();
// Update every second
const timer = setInterval(updateCountdown, 1000);
// Store timer reference for cleanup if needed
this.countdownTimer = timer;
},
initializeSlider() {
if (this.totalSlides <= 1) return;
// Add event listeners for navigation buttons
const prevBtn = document.getElementById('prevSlide');
const nextBtn = document.getElementById('nextSlide');
if (prevBtn) {
prevBtn.addEventListener('click', () => this.previousSlide());
}
if (nextBtn) {
nextBtn.addEventListener('click', () => this.nextSlide());
}
// Add event listeners for dots
const dots = document.querySelectorAll('.slider-dot');
dots.forEach((dot, index) => {
dot.addEventListener('click', () => this.goToSlide(index));
});
// Start auto-slide
this.startAutoSlide();
},
nextSlide() {
this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
this.updateSlider();
this.resetAutoSlide();
},
previousSlide() {
this.currentSlide = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
this.updateSlider();
this.resetAutoSlide();
},
goToSlide(index) {
this.currentSlide = index;
this.updateSlider();
this.resetAutoSlide();
},
updateSlider() {
const slider = document.querySelector('.events-slider');
if (slider) {
const translateX = -this.currentSlide * (100 / this.totalSlides);
slider.style.transform = `translateX(${translateX}%)`;
}
// Update dots
const dots = document.querySelectorAll('.slider-dot');
dots.forEach((dot, index) => {
if (index === this.currentSlide) {
dot.classList.remove('bg-slate-300');
dot.classList.add('bg-blue-600');
} else {
dot.classList.remove('bg-blue-600');
dot.classList.add('bg-slate-300');
}
});
},
startAutoSlide() {
if (this.totalSlides <= 1) return;
this.autoSlideTimer = setInterval(() => {
this.nextSlide();
}, 5000); // Auto-slide every 5 seconds
},
resetAutoSlide() {
if (this.autoSlideTimer) {
clearInterval(this.autoSlideTimer);
this.startAutoSlide();
}
}
}
}).mount('#app');
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists